路由进阶

• 路由模块封装
• 好处：拆分模块，利于维护。
• 绝对路径：基于 @ 指代 src 目录，从 src 目录出发找组件。

• 导航链接
• vue-router 提供了一个全局组件 router-link（取代 a 标签）。
• 优势：
1. 能跳转，配置 to 属性指定路径（必须）。本质还是 a 标签，to 无需 #。
2. 能高亮，默认就会提供高亮类名，可以直接设置高亮样式。
• 两个高亮类名：
1. router-link-active 模糊匹配（用的多） to="/my" 可以匹配 /my、/my/a、/my/b…
2. router-link-exact-active 精确匹配 to="/my"仅可以匹配 /my。
• 定制 router-link 的两个高亮类名
• linkActiveClass：模糊匹配类名自定义。
• linkExactActiveClass：精确匹配类名自定义。
• 声明式导航 - 跳转传参
• 目标：在跳转路由时，进行传值。
1. 查询参数传参
• 传参格式：to="/path?参数名=值"
• 对应页面组件接收传递来的值：$route.query.参数名
2. 动态路由传参
• 配置动态路由
• 配置导航链接：to="/path/参数值"
• 对应页面组件接收传递过来的值：$route.params.参数名
• 两种传参方式的区别
1. 查询参数传参（适合传多个参数）
2. 动态路由传参（适合传单个参数，优雅简洁）
• 动态路由参数可选符
• 问题：配了路由 path:"/search/:words" 若在跳转时不传参，会未匹配到组件，显示空白。
• 原因：/search/:words 表示必须要传参数。如果不传参数，也希望匹配，可以在最后加上可选符 ”?”。
• 改进后：path:"/search/:words?"

• 路由重定向 / 路由 404 / 路由模式
• 重定向
• 介绍：匹配 path 后，强制跳转 path 路径。
• 语法：{path: 匹配路径, redirect: 重定向到的路径}
• 404
• 作用：当路径找不到匹配时，给个提示页面。
• 位置：配在路由最后。
• 语法：path:"*"（任意路径） - 前面不匹配就命中最后这个。
• 路由模式
• 问题：路由的路径看起来不自然，有 #
• hash路由（默认）例如：http://localhost:8080/#/home
• history路由（常用）例如：http://localhost:8080/home（上线需要服务器端支持）
• 配置：

• 编程式导航 / 编程式导航传参（查询参数传参 ＆ 动态路由传参）
• 基本跳转
• 编程式导航：使用 JavaScript 代码来进行跳转。
• path 路径跳转：
1. path 路径跳转（简易方便）
1. 动态路由传参（需要配置动态路由）
• name 命名路由跳转
1. query 传参
1. 动态路由传参（需要配置动态路由）

综合案例：面经基础版

• 分析：配路由 + 实现功能
• 配路由
1. 首页和面经详情，两个一级路由。
2. 首页内嵌四个可切换页面（嵌套二级路由）。
• 实现功能
1. 首页请求渲染。
2. 跳转传参到详情页，详情页渲染。
3. 组件缓存，优化性能。

• keep-alive
• 介绍：
• keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
• keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。
• 优点
• 在组件切换过程中把切换出去的组件保留在内存中，防止重复渲染 DOM，减少加载时间及性能消耗，提高用户体验性。
• 三个属性：
1. include：组件名数组，只有匹配的组件会被缓存。
2. exclude：组件名数组，任何匹配的组件都不会被缓存。
3. max：最多可以缓存多少组件实例。
• 两个声明周期函数（钩子）
• activated()：当组件被激活（使用）的时候触发，进入页面触发。
• deactivated()：当组件不被使用的时候触发，离开页面触发。

• 案例演示：interview-experience-basic