Vue3—13—VueRouter
一、路由是什么
使用步骤:
1.配置路由映射表route
2.配置路由对象router，里面包括了route和history模式
3.vue加载插件
4.使用《route-link》标签或编程式路由this.$router.push()
5.配置《router-view》占位
路由主要做数据转发的工作；
二、系统路由的三个阶段
1.后端路由后端阶段：每次url改变都要向后端服务器重新请求一次静态资源
2. 前端路由前端渲染阶段：每次url改变都要向静态资源服务器（前端服务器）重新请求一次静态资源
3.前端路由前端渲染阶段（spa阶段）：每次url改变不需要向服务器发送静态资源请求了
spa阶段，url发生改变，这个时候通过使用url的hash或者html的history浏览器也将不会去服务器请求资源了即不会实现页面的刷新，前端自己做出了响应切换了页面，并给浏览器渲染；
4.spa阶段是如何实现不向服务器发送资源的？
（4.1）
（4.2）
replace是替换，没有回栈的操作
push是压栈，pop是回退可以出栈
阻止默认行为，使用history；
三、路由的默认路径
四、路由的懒加载
五、vuerouter内全局组件《route-link》的属性
这个组件内部看来调用的也是编程时路由router.push();
六、给route加属性
可以给路由映射表route放上name、meta属性；
6.2获取route属性的值
然后可以通过this.$route.name取出值，this.$route.meta取出值；
七、动态路由
除了加属性，还可以设置动态路由
动态路由匹配关系：
不将路由映射表写死，根据传过来的url动态决定跳转；
通过router进入到每个sfc后，每个组件实例都可以通过this.$route获取进入本路由映射线对象route，然后通过this.$route.params.在route定义的动态路由名字，可以取出值；
7.2获取动态路由的值
7.3动态路由之匹配多个参数
八、路由嵌套
动态路由和路由嵌套要分清，路由嵌套是子路由，动态路由只不过是url不写死是动态决定的，是不是子路由无所谓；
8.2路由嵌套的配置
九、通配路由
十、编程式路由（编程式导航）
10.2路由除了传递url字符字符串，可以传递对象
两种方式都可以传递query，即url的查询字符串
这个query式专业术语，就是url后面的？username=aaa&pwd=12345这种东西；
十一、组件式路由《routre-link》
编程式路由得到了增强，组件式路由也不甘示弱，得到了增强；
对了，v2的router-link的tag属性被删除了，现在想将router-link渲染成什么完全需要使用插槽的方式，默认是a标签；（所以我们可以猜测router-link组件的源码，里面肯定是一个《slot》《a/》《/slot》）
既然是插槽，那么目前和作用域插槽在一起，可以实现很多功能；
11.2<router-view>也有作用于插槽了
十二、动态添加路由
就是一开始路由 映射表什么都没有，更别说动态路由、路由嵌套了，什么都没有，就一个空的数组空的路由映射表，
这个时候我们可以使用js动态的添加路由关系；
十三、路由守卫
每一次路由导航之前，都会调用这个守卫函数router.beforeEach()，所以我们可以在这个函数里做很多判断；
全局路由:
router.beforeEach（）、router.afterEach();
路由独享守卫(由表内路由)：
routes：【
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}】
const router = new VueRouter(routes)
组件内的守卫
最后，你可以在路由组件内直接定义以下路由导航守卫：
beforeRouteEnterbeforeRouteUpdate(2.2 新增)beforeRouteLeave
const Foo = {
template: `...`,
beforeRouteEnter(to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不！能！获取组件实例 `this`
// 因为当守卫执行前，组件实例还没被创建
},
beforeRouteUpdate(to, from, next) {
// 在当前路由改变，但是该组件被复用时调用
// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
},
beforeRouteLeave(to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
}
}
