前边做的资产管理代码都是放在一个页面（因为代码比较少），可是这样并不好
一、问题：
http://fanyoufu2.gitee.io/hmpc/#/login
为什么要使用路由？
可以不刷新网页就改变网页内容，用户体验更好
前端路由：
根据地址栏变化（不发请求），去局部更新不同的页面内容。
前端业务场景切换。
二、路由-实现原理：
地址栏中的#有两个含义：
1、锚点链接： 在当前网页内部进行跳转。示例：https://baike.baidu.com/item/%E9%94%9A%E7%82%B9#3
2、哈希值(hash): 它的作用是，当它发生变化时，它不会导致当前页面的刷新值，但是它的变化会触发hashchange事件，这个事件能被监听到 ------ 路由原理
3、hashchange： 在window上添加这个事件监听
路由实现原理
首先添加标签和锚点链接
同时给window添加hashchange事件来观察单击后的效果
在事件中写判断，并在判断之后，显示在页面上
功能改进（（刷新后）页面打开的时候有东西，地址栏变化引起内容的变化页面不刷新）
三、SPA
单页面应用程序，简称SPA（single page application）一个系统上的所有功能在一个页面上实现，
(在移动端比较多,只要是Vue开发的应用，绝大多数都是SPA)
SPA是通过前端路由实现业务场景的切换的。
在vue框架中额外引入vue-router插件来配合组件系统就可以轻易地实现。
在前端的三大框架中，都有成型的SPA的解决方案。
在单页面应用程序中，如何切换页面的业务场景。
优点：
整体不刷新页面，用户体验更好。
缺点：
首次加载会比较慢一点。
四、使用vue-router
导入
与vue的使用方法一样：
# 先下载到本地，再引用
<scriptsrc="./vue-router.min.js"></script>
# 直接引用
<scriptsrc="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"></script>
要先引入vue，后引入vue-router
路由规则：某一个路由的地址对应某一个页面
---------------------------------------------------------------------------------------------------------
固定写法
组件没有取名字
显示
组件取名字
（这样写就可以有名字）
也可以这样写
-----------------------------------------------------------------------------------------------------------------
vue.router实际操作
首先引入vue.router和vue
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"></script>
步骤：
1、 初始化vue-router: 用vueRouter去new一个路由对象 // VueRouter是在vue-router.js中提供的一个构造器
2.、在vue实例中，使用router配置项，配置当前要使用的路由对象
3 在模板中设置路由出口 --- 添加一个容器，来用装入对应的组件
实现：
1、初始化vue-router: 用vueRouter去new一个路由对象（VueRouter是在vue-router.js中提供的一个构造器）
const router = new VueRouter({
// routes: 配置路由规则
//{ path: 路由地址1, component: 当地址栏访问路由地址1时，要显示的组件 （内容）}
// path, component都是固定写法
下边这种写法是带（组件）名字的
{ path: '/index', component: { name: 'index', template: '<div>我是spa的主页，有什么可以帮助你的吗？</div>' } },
})
可以不用带名字写
也可以定义对象之后放入对象
2、在vue实例中，使用router配置项，配置当前要使用的路由对象
const vm = new Vue({
el: "#app",
// router是一个配置项，固定写法。就和el, data, methods一样。
router: router
})
3、在模板中设置路由出口 --- 添加一个容器，来用装入对应的组件
<router-view></router-view>
路由出口
router-view是vue-router.js中提供的全局组件
用来装入 根据路由规则匹配成功的组件
a标签替换成router-link
和a标签效果一样不过被选中的标签会多一个类（方便我们做效果）
五、vue-router动态路由
应用场景：当你遇到详情页的时候就可以使用动态路由
概念：不同的路由地址，指向同一个组件，此时需要使用动态路由。
目标：实现新闻详情的功能：即不同的新闻页使用同一个组件，根据传入的参数不同，达到显示不同内容的目标。
操作：
router-link: vue-router提供的全局组件，有一个to属性，来进行跳转
router-link前边不用加#它内部班给你加了
// path: '/seq/:id'：它会匹配所有 /seq/12 或者是 /seq/18 .... 这类地址
// 同时，12(18)会传给这里的id。理解:id是一个占位符。
// $route: 理解为一个全局变量：它在所有的组件中都可以直接访问。它其实是一个对象 ，是vueRouter.js添加到组件上的
//一个对象，它里面保存着当前路由信息. $route.params中保存着动态路由传递的参数
怎么获取里边的的id：$route.params.占位符
如果忘记了，去调试工具vue里看一看
总结：
在路由规则中，匹配到不同的地址，指向同一个组件
代码：
定义路由时，注意：:id。 {path:'/seq/:id', component: seq}
数据：模板 {{$route.params.id}} 组件 this.$route.params.id
六、编程式导航（根据情况跳转不会直接跳，类似登录）
页面跳转（路由地址切换）有两种方式：
1、通过用户点击链接。router-link, to, 或者是 a href=''
写死的，适合于固定不变的导航
2、编程式导航。通过this.$router.push(地址)跳转。
格式：
// this.$router.push(地址)
// $router: 是组件上的一个对象，在它的原型对象上面有很多的方法， push()用来做路由切换。
this.$router.push('/index')
应用场景：需要根据逻辑判断，跳入不同的页面，就可以使用编程式导航。例如：登陆功能。
// this.$router.push(地址)
// $router: 是组件上的一个对象，在它的原型对象上面有很多的方法， push()用来做路由切换。
七、路由重定向
当我们进去的时候没有匹配任何路由（匹配了#/）
重定向：本来是访问的A，给你跳转到B
八、路由404页面
404页面：当我们访问一个不存在的页面时，给出一个友好的提示：让用户访问404
* 表示全部，实现404页面
上边的规则都没有匹配成功就去里边
九、页面跳转及传参
从页(路由)面pageA跳转到pageB（路由） ,并携带参数，在pageB中接收这个参数
跳转有两种方式：
通过router-link的to属性跳转
通过$route.push()方法来跳转
传参有两种方式:
查询传参 /aricle?id=1001
路径传参 /article/1001
获取传参数的方式: （根据传参不同，获取参数也不同）
- 查询传参： this.$route.query.id
- 路径传参：this.$route.params.id
从查询传参$route.query.id
传复杂
如果是路径传参必须要写name
query方式传参要写
接收的是时候$route.push()中的实参也可以是字符串也可以是对象
假设我们又加了一个数组
id，age，数组都可以在在vue中看到（也可以放到网页上）但是在路径中看到
弊端，刷新的时候就没了
十、路由嵌套
重点：
①在要嵌套的组件的模板中添加router-view
②要写children
3匹配到下边的路由出口
然后显示后边的结构
