Vuejs学习笔记--router笔记(4.x版本)
1. 路由的监听原理：
1.1 URL的hash（通过改变URL的hash值，让页面不发生刷新）
URL的hash也就是锚点(#), 本质上是改变window.location的href属性
我们可以通过直接赋值location.hash来改变href, 但是页面不发生刷新；
hash的优势就是兼容性更好，在老版IE中都可以运行，但是缺陷是有一个#，显得不像一个真实的路径
1.2 history接口是HTML5新增的, 它有l六种模式改变URL而不刷新页面
2. 版本管理
vue@3.1.2 --> 最后1位（2）一般是小bug修复，中间1位（1）一般是新增功能，第一位（3）一般是大的版本更新
3. vue-router基本使用：配置（index）--安装（main）--展示（App）
4. 配置（index）
4.1 配置默认路径
4.2 配置Not Found路径
4.3 配置history模式
4.4.1 配置路由懒加载
4.4.2 打包后出现map文件
作用：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。所以该文件如果项目不需要是可以去除掉。
解决办法：去src/config/index.js中改一个参数：
productionSourceMap:false
4.5 配置中的其他属性（路由嵌套）
- name属性 ：路由记录独一无二的名称
- meta属性：自定义的数据
- children属性：路由嵌套，放置子路由
4.6 动态路由的基本匹配
4.7 动态“添加”路由
4.8 动态删除路由
4.9 导航守卫beforeEach：主要用来通过跳转或取消的方式守卫导航
- to参数: Route对象, 即将跳转到的Route对象
- from参数: Route对象, 从哪一个路由对象导航过来的
- 返回值问题:
- 1.false: 不进行导航
- 2.undefined或者不写返回值: 进行默认导航
- 3.字符串: 路径, 跳转到对应的路径中
- 4.对象: 类似于 router.push({path: "/login", query: ....})
5 展示（App）router-link和router-view
5.1 router-link的参数
- to属性：字符串/对象，路由对应的组件名称
- replace属性：当点击时，会调用 router.replace()，而不是 router.push()，就没有返回了
- active-class属性：设置激活a元素后应用的class，默认是router-link-active
- exact-active-class属性：链接精准激活时，应用于渲染的的class，默认是router-link-exact-active，应用在路由嵌套的场景（路径完全匹配时添加）
- custom属性：表示整个元素要自定义，取消默认的a标签，一般结合使用
- 插槽方式自定义标签（无参数）：
-
- v-slot=“props”（作用域插槽）（可传参）：
-
- props: href 跳转的链接
- props: route对象
- props: navigate导航函数
- props: isActive 是否当前处于活跃的状态
- props: isExactActive 是否当前处于精确的活跃状态
5.2 问题：刚才为了让路由组件之间能够跳转，我们使用了router-link标签。如果我们不想要写router-link呢？
解答：可以通过组件的$router属性实现同样的效果：
5.3 router-view的增强
- v-slot=“props”
- props.Component属性：要渲染的组件
5.4 编程式导航：通过代码的方式实现路由跳转（optionsAPI和compositionAPI）
5.5 补充：$router 和 $route 区别
r o u t e 就是表示，当前哪个路由处于活跃状态，这个route表示的就是哪个路由组件。
r o u t e r 是我们在router/index.js当中创建的router对象，就是路由对象。这个路由对象当中有好几个路由。哪个路由处于活跃状态，route就是表示哪个路由组件。
6. keep-alive使用
6.1 作用
6.1.1 可以使被包含的组件保留状态，避免组件频繁的被创建和销毁
- 它们有两个非常重要的属性:
- include - 字符串或正则表达，只有匹配的组件会被缓存
- exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存
6.2 使用
keep-alive包裹router-view时，对应所有路径的组件都会被缓存