一、认识vue-router
目前前端流行的三大框架, 都有自己的路由实现: pAngular的ngRouter
React的ReactRouter
Vue的vue-router
Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得非常容易。
目前Vue路由最新的版本是4.x版本，我们上课会基于最新的版本讲解。
vue-router是基于路由和组件的
路由用于设定访问路径, 将路径和组件映射起来.
在vue-router的单页面应用中, 页面的路径的改变就是组件的切换.
安装Vue Router：
npm install vue-router@4
路由的使用步骤
使用vue-router的步骤:
第一步：创建路由组件的组件；
第二步：配置路由映射: 组件和路径映射关系的routes数组；
第三步：通过createRouter创建路由对象，并且传入routes和history模式；
第四步：使用路由: 通过和；
路由的基本使用流程
路由的默认路径
我们这里还有一个不太好的实现:
默认情况下, 进入网站的首页, 我们希望渲染首页的内容；
但是我们的实现中, 默认没有显示首页组件, 必须让用户点击才可以；
如何可以让路径默认跳到到首页, 并且渲染首页组件呢?
我们在routes中又配置了一个映射：
path配置的是根路径: /
redirect是重定向, 也就是我们将根路径重定向到/home的路径下, 这样就可以得到我们想要的结果了.
二、history模式
另外一种选择的模式是history模式：
router-link
router-link事实上有很多属性可以配置：
to属性： 是一个字符串，或者是一个对象
replace属性： 设置 replace 属性的话，当点击时，会调用 router.replace()，而不是 router.push()； active-class属性： 设置激活a元素后应用的class，默认是router-link-active
exact-active-class属性： 链接精准激活时，应用于渲染的 的 class，默认是router-link-exact-active；
路由懒加载
打包效果分析
路由的其他属性
动态路由基本匹配
获取动态路由的值
匹配多个参数
NotFound
匹配规则加*
多了* 会将输入的地址信息转换成数组形式
路由的嵌套
什么是路由的嵌套呢？
目前我们匹配的Home、About、User等都属于底层路由，我们在它们之间可以来回进行切换；
但是呢，我们Home页面本身，也可能会在多个组件之间来回切换：
比如Home中包括Product、Message，它们可以在Home内部来回切换；
这个时候我们就需要使用嵌套路由，在Home中也使用 router-view 来占位之后需要渲染的组件；
路由的嵌套配置
代码的页面跳转
query方式的参数
替换当前的位置
页面的前进后退
router-link的v-slot
router-view的v-slot
动态添加路由
某些情况下我们可能需要动态的来添加路由：
比如根据用户不同的权限，注册不同的路由；
这个时候我们可以使用一个方法 addRoute；
如果我们是为route添加一个children路由，那么可以传入对应的name：
动态删除路由
路由导航守卫
登录守卫功能
其他导航守卫
Vue还提供了很多的其他守卫函数，目的都是在某一个时刻给予我们回调，让我们可以更好的控制程序的流程或者功能：
https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html
我们一起来看一下完整的导航解析流程： p 导航被触发。
在失活的组件里调用 beforeRouteLeave 守卫。
调用全局的 beforeEach 守卫。
在重用的组件里调用 beforeRouteUpdate 守卫(2.2+)。
在路由配置里调用 beforeEnter
解析异步路由组件。
在被激活的组件里调用 beforeRouteEnter
调用全局的 beforeResolve 守卫(2.5+)。
导航被确认。
调用全局的 afterEach 钩子。
触发 DOM 更新。
调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。
