相关推荐recommended
vue day06
作者:mmseoamin日期:2024-02-04

1、路由模块封装

vue day06,请添加图片描述,第1张

vue day06,请添加图片描述,第2张

vue day06,请添加图片描述,第3张

2、声明式导航 实现导航高亮效果

vue day06,在这里插入图片描述,第4张

vue day06,在这里插入图片描述,第5张

直接通过这两个类名对相应标签设置样式

vue day06,请添加图片描述,第6张

点击a链接进入my页面时,a链接 我的音乐高亮,同时my下的a、b页面中的 我的音乐也有router-link-active类,但没有精确匹配的类(只有my页面的 我的音乐有这个类),如果用模糊匹配的类设置了样式,my/a页面中 我的音乐会根据设置好的样式高亮vue day06,请添加图片描述,第7张

3、声明式导航 跳转传参

vue day06,请添加图片描述,第8张

vue day06,请添加图片描述,第9张

vue day06,请添加图片描述,第10张

vue day06,请添加图片描述,第11张

动态路由参数可选符:

vue day06,请添加图片描述,第12张

4、路由 重定向 模式设置

vue day06,请添加图片描述,第13张

vue day06,请添加图片描述,第14张

vue day06,请添加图片描述,第15张

vue day06,请添加图片描述,第16张

5、编程式导航

先看如何跳转,再看如何传参

基本跳转:

vue day06,请添加图片描述,第17张

vue day06,请添加图片描述,第18张

路由传参:

(1)vue day06,请添加图片描述,第19张

vue day06,在这里插入图片描述,第20张

vue day06,在这里插入图片描述,第21张

(2)vue day06,请添加图片描述,第22张

vue day06,在这里插入图片描述,第23张

6、案例

二级路由

vue day06,请添加图片描述,第24张

vue day06,请添加图片描述,第25张

点击面经页面中文章跳转到详情页,并携带文章id:

vue day06,请添加图片描述,第26张

根路径重定向:vue day06,在这里插入图片描述,第27张

vue day06,请添加图片描述,第28张

组件缓存:vue day06,请添加图片描述,第29张

vue day06,请添加图片描述,第30张

vue day06,请添加图片描述,第31张

vue day06,在这里插入图片描述,第32张

7、自定义创建项目

vue day06,在这里插入图片描述,第33张

8、eslint

手动修正:根据报错的规则说明去eslint规则表中搜

vue day06,请添加图片描述,第34张

vue day06,请添加图片描述,第35张