目录
路由的封装抽离
问题:所有的路由配置都堆在main.js中合适么?
目标:将路由模块抽离出来。 好处:
拆分模块,利于维护
![](https://i-blog.csdnimg.cn/direct/6face32f0685445a99d885a71774a548.png)
绝对路径:@指代src目录,可以用于快速引入组件
基于
@ 指代 src 目录
,从 src 目录出发找组件
![](https://i-blog.csdnimg.cn/direct/6198b627e06d42eca65bb3145a41997f.png)
声明式导航 - 导航链接
需求:实现导航高亮效果
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 自动给当前导航添加了
两个高亮类名
![](https://i-blog.csdnimg.cn/direct/8ee742b02fe2436081fbf07a94c142ec.png)
① router-link-active
模糊匹配 (用的多)
to="/my" 可以匹配 /my /my/a /my/b ....
② router-link-exact-active
精确匹配
to="/my" 仅可以匹配 /my
说明:router-link 的
两个高亮类名 太长了,
我们希望能定制怎么办?
![](https://i-blog.csdnimg.cn/direct/69fbd427e8634d608361459bca75b346.png)
声明式导航 - 跳转传参
目标:在跳转路由时, 进行传值
1. 查询参数传参
2. 动态路由传参
![](https://i-blog.csdnimg.cn/direct/6706008d8fd44fe1b4d0db1081760606.png)
1. 查询参数传参
① 语法格式如下
to="/path
?参数名=值
"
② 对应页面组件接收传递过来的值
$route.
query.参数名
![](https://i-blog.csdnimg.cn/direct/370f22f241034d368863b9efa6f979d8.png)
2. 动态路由传参
① 配置动态路由
② 配置导航链接
to="/path
/参数值
"
③ 对应页面组件接收传递过来的值
$route.
params.参数名
![](https://i-blog.csdnimg.cn/direct/7b4ad12ec773492b902ec33a314814e4.png)
两种传参方式的区别1. 查询参数传参 (比较适合传 多个参数 )① 跳转:to="/path ?参数名=值&参数名2=值 "② 获取:$route.query.参数名
2. 动态路由传参 ( 优雅简洁 ,传单个参数比较方便)① 配置动态路由:path: "/path/参数名"② 跳转:to="/path /参数值 "③ 获取:$route.params.参数名
动态路由参数可选符
问题:
配了路由
path: "/search/:words"
为什么按下面步骤操作,会未匹配到组件,显示空白?
原因:
/search/:words 表示,必须要传参数。如果不传参数,也希望匹配,可以加个可选符
"?"
Vue路由 - 重定向
问题:
网页打开, url 默认是 / 路径,
未匹配到组件时,会出现空白
说明:
重定向 →
匹配path后, 强制跳转path路径
语法:
{ path: 匹配路径, redirect: 重定向到的路径 },
![](https://i-blog.csdnimg.cn/direct/26e4ac46f43543bd9979b0ba53658ffa.png)
Vue路由 - 404
作用:
当路径找不到匹配时,给个提示页面
位置:
配在路由最后
语法:
path: "*" (任意路径) – 前面不匹配就命中最后这个
![](https://i-blog.csdnimg.cn/direct/f3788afe30504023b307c70ada952379.png)
Vue路由 - 模式设置
问题: 路由的路径看起来不自然, 有#,能否切成真正路径形式?
hash路由(默认) 例如: http://localhost:8080/#/home
history路由(常用) 例如: http://localhost:8080/home (以后上线需要服务器端支持)
编程式导航 - 基本跳转
问题:点击按钮跳转如何实现?
编程式导航:用JS代码来进行跳转
两种语法:
① path 路径跳转
② name 命名路由跳转
① path 路径跳转 (简易方便)
![](https://i-blog.csdnimg.cn/direct/0537e15e678a4ce8917d0c8efab54a38.png)
② name 命名路由跳转 (适合 path 路径长的场景)
![](https://i-blog.csdnimg.cn/direct/bf398f81f7574ff0a2a1e46ed13125f6.png)
编程式导航 - 路由传参
问题:点击搜索按钮,跳转需要传参如何实现?
两种传参方式:查询参数 + 动态路由传参
两种跳转方式,对于两种传参方式都支持:
① path 路径跳转传参
② name 命名路由跳转传参
① path 路径跳转传参 (query传参)
① path 路径跳转传参 (动态路由传参)
![](https://i-blog.csdnimg.cn/direct/1ffba002acff42298bdfd308e7100af8.png)
② name 命名路由跳转传参 (query传参)
② name 命名路由跳转传参 (动态路由传参)
![](https://i-blog.csdnimg.cn/direct/14828ed92027410ca1bd33297e90ba71.png)
组件缓存 keep-alive
1. keep-alive是什么
keep-alive 是 Vue 的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。
keep-alive 是一个抽象组件:它自身不会渲染成一个 DOM 元素,也不会出现在父组件链中。
2. keep-alive的优点
在组件切换过程中 把切换出去的组件保留在内存中,防止重复渲染DOM,
减少加载时间及性能消耗,提高用户体验性。
![](https://i-blog.csdnimg.cn/direct/b4a1cc64e8204e20a44dbd673de366f4.png)
3.
keep-alive的
三个属性
① include : 组件名数组,只有匹配的组件会被缓存
② exclude : 组件名数组,任何匹配的组件都不会被缓存
③ max : 最多可以缓存多少组件实例
![](https://i-blog.csdnimg.cn/direct/8713ca2e029147c183986275e6e8888d.png)
4. keep-alive的使用会触发两个生命周期函数
activated 当组件
被激活(使用)
的时候触发 → 进入这个页面的时候触发
deactivated 当组件
不被使用
的时候触发 → 离开这个页面的时候触发
组件缓存后就不会执行组件的created, mounted, destroyed 等钩子了
所以其提供了
actived
和
deactived
钩子,帮我们实现业务需求。
![](https://i-blog.csdnimg.cn/direct/e7ce9e1fd5da4d229dab514fe0e46ad3.png)
自定义创建项目
目标:基于 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中随意做一些改动,添加一些分号,空行。
![](https://i-blog.csdnimg.cn/direct/f56a48b3a9fb49eabf4b4df77207b41e.png)
两种解决方案:
① 手动修正
根据错误提示来一项一项
手动
修改纠正。
如果你不认识命令行中的语法报错是什么意思,根据错误代码去 [
ESLint 规则表
] 中查找其具体含义。
② 自动修正
基于 vscode 插件 ESLint
高亮错误
,并
通过配置 自动
帮助我们
修复
错误。
![](https://i-blog.csdnimg.cn/direct/4cc88da303f54eb484a8fef06d432538.png)