vue day06

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张图片

你可能感兴趣的:(vue.js,javascript,前端)