Vue 核心技术与实战day06

目录

路由的封装抽离

声明式导航 - 导航链接

Vue路由 - 重定向

Vue路由 - 404

Vue路由 - 模式设置

编程式导航 - 基本跳转

编程式导航 - 路由传参

组件缓存 keep-alive

自定义创建项目

代码规范错误

---

路由的封装抽离

问题：所有的路由配置都堆在main.js中合适么？

目标：将路由模块抽离出来。 好处： 拆分模块，利于维护

绝对路径：@指代src目录，可以用于快速引入组件

基于 @ 指代 src 目录 ，从 src 目录出发找组件

声明式导航 - 导航链接

需求：实现导航高亮效果

vue-router 提供了一个全局组件 router-link (取代 a 标签)

① 能跳转 ，配置 to 属性指定路径( 必须 ) 。 本质还是 a 标签 ， to 无需 #

② 能高亮， 默认就会提供 高亮类名 ，可以直接设置高亮样式

1. router-link是什么?

vue-router提供的全局组件, 用于替换 a 标签

2. router-link怎么用?

<router-link to="/路径值" ></router-link>

必须传入to属性, 指定路由路径值

3. router-link好处?

能跳转，能高亮 ( 自带激活时的类名 )

说明：我们发现 router-link 自动给当前导航添加了 两个高亮类名

① router-link-active 模糊匹配 (用的多)

to="/my" 可以匹配 /my /my/a /my/b ....

② router-link-exact-active 精确匹配

to="/my" 仅可以匹配 /my

说明：router-link 的 两个高亮类名 太长了， 我们希望能定制怎么办？

声明式导航 - 跳转传参

目标：在跳转路由时, 进行传值

1. 查询参数传参

2. 动态路由传参

1. 查询参数传参

① 语法格式如下

to="/path ?参数名=值 "

② 对应页面组件接收传递过来的值

$route. query.参数名

2. 动态路由传参

① 配置动态路由

② 配置导航链接

to="/path /参数值 "

③ 对应页面组件接收传递过来的值

$route. params.参数名

两种传参方式的区别

1. 查询参数传参 (比较适合传 多个参数 )

① 跳转：to="/path ?参数名=值&参数名2=值 "

② 获取：$route.query.参数名

2. 动态路由传参 ( 优雅简洁 ，传单个参数比较方便)

① 配置动态路由：path: "/path/参数名"

② 跳转：to="/path /参数值 "

③ 获取：$route.params.参数名

动态路由参数可选符

问题： 配了路由 path: "/search/:words" 为什么按下面步骤操作，会未匹配到组件，显示空白？

原因： /search/:words 表示，必须要传参数。如果不传参数，也希望匹配，可以加个可选符 "?"

Vue路由 - 重定向

问题： 网页打开， url 默认是 / 路径， 未匹配到组件时，会出现空白

说明： 重定向 → 匹配path后, 强制跳转path路径

语法： { path: 匹配路径, redirect: 重定向到的路径 },

Vue路由 - 404

作用： 当路径找不到匹配时，给个提示页面

位置： 配在路由最后

语法： path: "*" (任意路径) – 前面不匹配就命中最后这个

Vue路由 - 模式设置

问题: 路由的路径看起来不自然, 有#，能否切成真正路径形式?

hash路由(默认) 例如: http://localhost:8080/#/home

history路由(常用) 例如: http://localhost:8080/home (以后上线需要服务器端支持)

编程式导航 - 基本跳转

问题：点击按钮跳转如何实现？

编程式导航：用JS代码来进行跳转

两种语法:

① path 路径跳转

② name 命名路由跳转

① path 路径跳转 (简易方便)

② name 命名路由跳转 (适合 path 路径长的场景)

编程式导航 - 路由传参

问题：点击搜索按钮，跳转需要传参如何实现？

两种传参方式：查询参数 + 动态路由传参

两种跳转方式，对于两种传参方式都支持：

① path 路径跳转传参

② name 命名路由跳转传参

① path 路径跳转传参 (query传参)

① path 路径跳转传参 (动态路由传参)

② name 命名路由跳转传参 (query传参)

② name 命名路由跳转传参 (动态路由传参)

组件缓存 keep-alive

1. keep-alive是什么

keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。

2. keep-alive的优点

在组件切换过程中 把切换出去的组件保留在内存中，防止重复渲染DOM，

减少加载时间及性能消耗，提高用户体验性。

3. keep-alive的 三个属性

① include ： 组件名数组，只有匹配的组件会被缓存

② exclude ： 组件名数组，任何匹配的组件都不会被缓存

③ max ： 最多可以缓存多少组件实例

4. keep-alive的使用会触发两个生命周期函数

activated 当组件 被激活（使用） 的时候触发 → 进入这个页面的时候触发

deactivated 当组件 不被使用 的时候触发 → 离开这个页面的时候触发

组件缓存后就不会执行组件的created, mounted, destroyed 等钩子了

所以其提供了 actived 和 deactived 钩子，帮我们实现业务需求。

自定义创建项目

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

ESlint 代码规范

目标：认识代码规范

代码规范：一套写代码的约定规则。例如："赋值符号的左右是否需要空格" "一句结束是否是要加;" ...

老话说：" 没有规矩不成方圆 " → 正规的团队 需要 统一 的编码风格

JavaScript Standard Style 规范说明 https://standardjs.com/rules-zhcn.html

下面是这份规则中的一小部分：

l 字符串使用单引号 'abc'

l 无分号 const name = 'zs'

l 关键字后加空格 if (name = 'ls') { ... }

l 函数名后加空格 function name (arg) { ... }

l 坚持使用全等 === 摒弃 ==

...

代码规范错误

目标：学会解决代码规范错误

如果你的代码不符合 standard 的要求， ESlint 会跳出来刀子嘴，豆腐心地提示你。

比如：在main.js中随意做一些改动，添加一些分号，空行。

两种解决方案：

① 手动修正

根据错误提示来一项一项 手动 修改纠正。

如果你不认识命令行中的语法报错是什么意思，根据错误代码去 [ ESLint 规则表 ] 中查找其具体含义。

② 自动修正

基于 vscode 插件 ESLint 高亮错误 ，并 通过配置 自动 帮助我们 修复 错误。