Vue学习记录（六）

路由的封装抽离

• 问题：所有的路由配置都堆在 main.js 中合适吗
• 目标：将路由模块抽离出来。好处：拆分模块，利于维护。
  • 
• 步骤
  1. 在 router 目录下的 index.js 中导入Vue
  2. 导出 router 并导入进 main.js
  3. 在导入组件时使用绝对路径，可以用 @ 来表示，@即表示 src目录
• 

声明式导航（router-link） - 导航链接

• 需求：实现导航高亮的效果
• vue-router 提供了一个全局组件 router-link（取代a标签）
  1. 能跳转，配置to属性指定路径（必须）。本质还是 a 标签。
  2. 能高亮，默认就会提供高亮类名，可以直接设置高亮样式
  • 
  • 

声明式导航 - 两个类名

• 
  1. router-link-active 模糊匹配（用的多）
  2. router-link-exact-active 精确匹配

自定义router-link的类名

• 

声明式导航 - 跳转传参

• 目的：在跳转路由时，进行传值

1. 查询参数传参（适合传多个参数）
   • 
2. 动态路由传参（简洁，适合传单个参数）
   • 

动态路由参数可选符

• 问题：配了路由 path:"/search/:words", 先点搜索页然后跳转路径但是没有匹配到组件，显示空白
• 原因：/search/:words 表示必须要传递参数。如果不传参数，也希望匹配，可以加可选符“？”
• 

Vue路由 - 404

• 作用：当路径找不到匹配时，给一个提示页面
• 位置：匹配在路由最后
• 语法：
• 

Vue路由 - 模式设置

• 问题：路由的路径看起来不自然，有#，想要切换成常见的路径形式
• hash路由（默认） 例如：http://localhost:8080/#/home
• history路由（常用） 例如：http://localhost:8080/home （以后上线需要服务器端支持）
• 

编程式导航 -- 两种跳转方式

• path路径跳转
  1. 绑定点击事件
  • 
  3. 配置跳转路径
  • 
• name命名路由跳转
  • 

编程式导航 -- 路由传参

1. path路径跳转传参
2. name 命名路由跳转传参
   • 
   • 
   • 
   • 
   • 

综合案例 -- 面经基础版

• 案例效果：
• 
• 分析：配路由 + 实现功能

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

综合案例 -- 配置路由

• 一级路由的配置
• 
• 二级路由的配置
  1. 在children配置项中配规则
  2. 准备二级路由出口
  • 

综合案例 -- 导航高亮

1. 将a标签替换成 router-link（to）
2. 结合高亮类名实现高亮效果（router-link-active 模糊匹配）

• 
• 

综合案例 -- 实现功能

1. 首页请求渲染
2. 安装 axios yarn add axios
3. 查看接口文档，确认请求方式、请求地址、请求参数
4. created 中发送请求，获取数据，储存
   • 
   • 
5. 跳转传参到详情页
   • 查询参数传参（适合多个参数） 9. ?参数=参数值 -> this.$route.query.参数名
   • 动态路由传参（适合单个参数）
   • 改造路由 -> /路径/参数 -> this.$route.params.参数名
     1. 访问 / 重定向到 /article （redirect）
     2. 返回上一页 $router.back()
     • 
     • 
     • 
6. 渲染详情页

• 小优化：加上v-if：只有当拿到article后才渲染页面
• 

8. 组件缓存，优化性能

• 组件缓存 - keep-alive
• 问题：从面经点到详情页，再返回面经页面时，数据重新加载了 -> 希望返回原来的页面
• 原因：路由跳转后，组件被销毁了，返回回来的组件又被重建了（生命周期又回到created），所以数据重新被加载了
• 解决：使用 keep-alive 进行组件缓存

1. 什么是keep-alive
   • keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们
   • kep-alive 是一个抽象组件，它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中
2. keep-alive的优点
   • 在组件切换过程中，将切换出去的组件保留在内存中，防止重复渲染 DOM
   • 减少加载时间以及性能的消耗，提高用户体验性
   • 
3. keep-alive 的三个属性
   • include: 组件数组名，只有匹配的组件会被缓存
   • exclude：组件数据名，只有匹配的组件不会被缓存
   • max：最多可以缓存多少组件实例
   • 
   • 注意区分组件名和文件名
   • 

• LayoutPage 组件（被缓存） - 多两个生命周期钩子
  1. actived - 激活时，组件被看到时触发
  2. deactived - 失活时，离开页面组件看不见时

使用cli自定义创建项目

• 目标：基于VueCli自定义创建项目架子
• 
• 

ESlint 代码规范

• 
• 如果代码不符合规范要求，ESlint 会报错
• 

代码规范错误

• 手动修正
  • 依据错误提示来逐项修正代码
• 自动修正
  • 基于 vscode 插件 ESLint 高亮错误，并通过配置自动修正代码错误
  • 配置自动修正代码：设置 -> 打开设置
  • 
  • 
•