一、路由进阶
1. 路由模块封装
所有的路由配置都堆在main.js里不合适，将路由模块提取出来，利于维护
放到 src / router 文件夹下 的 index.js
2. 声明式导航 / 声明式导航传参（查询参数传参&动态路由传参）
声明式导航 — 点击链接跳转
需求：实现导航高亮效果
vue-router 提供了一个全局组件 router-link 取代a标签，本质上还是a标签
1. 能跳转，<router-link to="/路径值"></router-link>
2. 能高亮，默认就会提供高亮类名，可以直接设置高亮样式
router-link-exact-active（精确匹配）
router-link-active（模糊匹配）
点击哪个就给哪个添加了两个类名
两个高亮类名
1. router-link-exact-active
to="/my" 仅可以匹配 /my
2. router-link-active（用的多）
to="/my" 可以匹配 /my /my/a /my/b
需求：两个高亮类名太长了，我们希望自定义
声明式导航传参
需求：在跳转路由时，进行传值
1. 查询参数传参（适合传多个参数）
配置导航链接
to="/path?参数名=值"
对应组件接收
$route.query.参数名
2. 动态路由传参
配置动态路由
/path/:参数名
配置导航链接
to="/path/参数值"
对应组件接收
$route.params.参数名
动态路由参数可选符
问题：配了路由 path:"/search/:key" ，为什么显示空白？
原因：/search/:key 表示，必须要传参数。如果不传也希望匹配，加个可选符 " ? "
3. 路由重定向 / 路由404 / 路由模式
路由重定向
问题：页面一打开，url 默认时 / 路径，未匹配到组件，所以页面显示空白
希望一打开能显示首页的内容
重定向语法：
404
作用：路径找不到匹配时，给个提示页面
路由模式
4. 编程式导航（查询参数传参&动态路由传参）
编程式导航 — 点击按钮跳转
编程式导航：用 js 代码来进行跳转
问题：点击按钮跳转如何实现？
两种语法：
1. path 路径跳转
2. name 命名路由跳转（适合长路径）
path 路径跳转
name 命名路由跳转
编程式导航传参
1. path 路径跳转传参
查询参数传参
动态路由传参
2. name 命名路由跳转传参
查询参数传参
动态路由传参
总结：
二、综合案例 — 面经基础版
- 一级路由
- 二级路由
- 导航高亮
- 请求渲染
- 路由传参
- 缓存组件
