前文

哈啰，宝子们，今天让我一起来看看Vue2路由的一些配置

一、路由模块的封装

1.抽离路由规则，并且暴露规则

2.main.js中引入路由规则，并挂载

3.在App.vue或者需要展示路由的地方设置路由占位符

二、路由高亮

1.当前被选择的路由会自动绑定类名（router-link-exact-active 和 router-link-active）

2.router-link-exact-active 和 router-link-active有什么区别呢？

举例声明式导航路径设置为find：router-link to="/find"

router-link-active：模糊匹配，凡是以find开头的路径元素，都会绑定上这个类名

router-link-exact-active：精确匹配，只有find路由元素才会绑定这个元素，其它比如:/find/one，都不会绑定这个类名

3.自定义匹配类型

在匹配路由规则时，可以设置自定义高亮类名

可以看到，选中指定路径时，会自动绑定类名

三、声明式导航-路由传参

1.查询参数传参（更适合多个参数传参）

传参：to="/path?参数=值"

接受：$route.query.参数名

2.动态路由（更适合单个参数）

传参：在匹配路由规则时就设置参数名

接受：$route.params.参数名

四、路由重定向、404路由、路由模式 （1）路由重定向（切换为/时触发）、404路由（找不到这个路由时触发）

配置路由规则时设置

（2）路由模式

如果切换成为history模式的时候需要提醒后台去注意匹配路由规则

五、编程式导航

1.跳转方式

path(短路径)

name(长路径)

本质：在设置路由规则时，使用一个简单代称去修饰路径

2.传参方式

查询参数传参

动态路由传参

区别：动态路由在路由规则中设置传递参数，查询参数直接在路径中上传参数,直接和间接的区别

与，query会在url上暴露参数名，两者都是以对象键值对的方式组织数据

六、组件缓存

在实际开发中我们会遇到一个问题，就是二级路由返回一级路由时，原先一级路由会被销毁，页面重新顶置

解决方案：使用缓存组件，包裹元素，维持组件状态

随之而来的问题：

1.缓存组件连带着二级路由也进行了缓存，因此下一次进入二级路由时，会永远显示同一个二级路由页面

解决方案：

使用include等精准缓存组件

2.缓存组件之后，创建/创建前（只有第一次触发），销毁/销毁前，挂载/挂前（只有第一次触发）钩子函数无法触发

因此在组件缓存之后，就无法在原先的钩子函数进行操作

解决方案：

使用缓存组件特有的声生命周期钩子函数

activated(组件激活时)            该钩子在服务器端渲染期间不被调用。

被 keep-alive 缓存的组件激活时调用。初始化操作放在actived里面

deactivated(组件停用时)        该钩子在服务器端渲染期间不被调用。