Day6：
1.路由进阶
1.路由的封装抽离
1.问题:所有的路由配置都堆在main.js中合适么?
2.目标:将路由模块抽离出来。好处:拆分模块，利于维护
3.小结
1.路由模块的封装抽离的好处是什么?
拆分模块，利于维护
2.以后如何快速引入组件?
基于 @ 指代 src 目录，从 src 目录出发找组件
2.声明式导航
1.导航高亮
1.导航链接
1.需求:实现导航高亮效果
2.vue-router提供了一个全局组件router-link(取代 a标签)
1.能跳转，配置 to 属性指定路径(必须)。本质还是 a标签，to 无需 #
2.能高亮，默认就会提供高亮类名，可以直接设置高亮样式
3.小结
1.router-link是什么?
vue-router提供的全局组件，用于替换a标签
2.router-link怎么用?
1.<router-link to="/路径值"></router-link>
2.必须传入to属性，指定路由路径值
3.router-link好处?
1.能跳转
2.能高亮(自带激活时的类名)
2.两个类名
1.精确匹配&模糊匹配
说明:我们发现 router-link 自动给当前导航添加了 两个高亮类名
<div class="footer wrap">
<a href="#/find”class>发现音乐</a>
<a href="#/my" aria-current="page" class='router-link-exact-active,router-link-active'>我的音乐</a>
<a href="#/friend" class>朋友</a>
</div>
1.router-link-active 模糊匹配 (用的多)
to="/my"可以匹配 /my /my/a /my/b …
2.router-link-exact-active 精确匹配
to="/my"仅可以匹配 /my
3.小结
1.router-link 会自动给当前导航添加两个类名，有什么区别呢?
1.router-link-active 模糊匹配(用的多)
2.router-link-exact-active 精确匹配
2.自定义高亮类名
说明:router-link 的 两个高亮类名 太长了，我们希望能定制怎么办?
<div class="footer wrap">
<a href="#/find”class>发现音乐</a>
<a href="#/my" aria-current="page" class='router-link-exact-active,router-link-active'>我的音乐</a>
<a href="#/friend" class>朋友</a>
</div>
方法：
const router =new VueRouter({
routes:[...],
linkActiveclass:"类名1",
linkExactActiveclass:"类名2"
})
结果：
<div class="footer wrap">
<a href="#/find” class>发现音乐</a>
<a href="#/my" aria-current="page"class="类名2,类名1">我的音乐</a>
<a href="#/friend" class>朋友</a>
</div>
3.小结
1.如何自定义 router-link 的 两个高亮类名?
linkActiveClass 模糊匹配 类名自定义
linkExactActiveClass 精确匹配 类名自定义
3.声明式导航传参(查询参数传参&动态路由传参)
1.目标:在跳转路由时,进行传值
2.方法：
1.查询参数传参
1.语法格式如下
to="/path?参数名=值"
2.对应页面组件接收传递过来的值
$route.query.参数名
2.动态路由传参
1.配置动态路由
const router= new VueRouter({
routes:[
...,)
{
path:'/search/:words',
component: Search
}
]
})
2.配置导航链接
to="/path/参数值"
3.对应页面组件接收传递过来的值
$route.params.参数名
3.两种传参方式的区别
1.查询参数传参(比较适合传多个参数)
1.跳转:to="/path?参数名=值&参数名2=值"
2.获取:$route.query.参数名
2.动态路由传参(优雅简洁，传单个参数比较方便)
1.配置动态路由:path:"/path/参数名"
2.跳转:to="/path/参数值"
3.获取:$route.params.参数名
3.小结
1.声明式导航跳转时,有几种方式传值给路由页面?
1.查询参数传参(多个参数)
跳转:to="/path?参数名=值"
接收:$route.query.参数名
2.动态路由传参(简洁优雅)
1.路由: /path/:参数名
2.跳转:to="/path/值"
3.接收:$route.params.参数名
4.动态路由参数可选符
1.问题:配了路由 path:"/search/:words”为什么按下面步骤操作，会未匹配到组件，显示空白?
2.原因: /search/:words 表示，必须要传参数。如果不传参数，也希望匹配
3.方法：可以加个可选符"?"
4.vue路由
1.重定向
1.问题:网页打开，url默认是 / 路径，未匹配到组件时，会出现空白
2.说明:重定向 → 匹配path后,强制跳转path路径
3.语法:{path:匹配路径,redirect:重定向到的路径}
const router= new VueRouter({
routes:[
{path:'/', redirect:'/home'},
{path:'/home', component: Home },
{path:'/search/:words', component:Search}
]
})
2.路由404
1.作用:当路径找不到匹配时，给个提示页面
2.位置:配在路由最后
3.语法:path:"*"(任意路径) - 前面不匹配就执行这个
3.路由模式
1.问题:路由的路径看起来不自然,有#，能否切成真正路径形式?
1.hash路由(默认)例如:http://localhost:8080/#/home
2.history路由(常用)例如:http://localhost:8080/home(以后上线需要服务器端支持)
方法：
const router = new VueRouter({
routes,
mode:"history"
})
5.编程式导航
1.编程式导航-基本跳转
1.问题:点击按钮跳转如何实现?
2.编程式导航:用JS代码来进行跳转
3.两种语法:
1.path 路径跳转(简易方便)
this.$router.push('路由路径')
this.$router.push({
path:'路由路径'
})
2.name 命名路由跳转(适合 path 路径长的场景)
this.$router.push({
name:'路由名'
})
{name:'路由名',path:'/path/xxx', component:XXX},
4.小结
1.编程式导航有几种跳转方式 ?
1.通过路径跳转(简易方便)
this.$router.push('路由路径')
this.$router.push({
path:'路由路径'
})
2.通过路由名字跳转(适合路径名字长的场景)
this.$router.push({
name:'路由名'
})
{name:'路由名', path:'/path/xxx',...},
2.编程式导航-路由传参(查询参数传参&动态路由传参)
1.问题:点击搜索按钮，跳转需要传参如何实现?
两种传参方式:查询参数+动态路由传参
2.两种跳转方式，对于两种传参方式都支持:
1.path 路径跳转传参
1.query传参
1.this.$router.push('/路径?参数名1=参数值1&参数2=参数值2')
2.this.$router.push({ //上面的方法适合参数少的时候 下面数组的写法适合参数多的适合
path:'/路径',
query:{
参数名1:'参数值1',
参数名2:'参数值2'
}
})
接收：$route.query.参数名
2.动态路由传参
1.this.$router.push('/路径/参数值')
2.this.$router.push({
path:'/路径/参数值'
})
接收：$route.params.参数名(动态路由传参需要配路由)
2.name 命名路由跳转传参
1.query传参
this.$router.push({
name:'路由名字',
query:{
参数名1:'参数值1',
参数名2:'参数值2'
}
})
接收：$route.query.参数名
2.动态路由传参
this.$router.push({
name:'路由名字',
params:{
参数名:'参数值'
}
})
接收：$route.params.参数名(动态路由传参需要配路由)
3.小结
1.编程式导航，如何跳转传参?
1.path 路径跳转
1.query传参
1.this.$router.push('/路径?参数名1=参数值1&参数2=参数值2')
2.this.$router.push({ //上面的方法适合参数少的时候 下面数组的写法适合参数多的适合
path:'/路径',
query:{
参数名1:'参数值1',
参数名2:'参数值2'
}
})
2.动态路由传参(需要配动态路由)
1.this.$router.push('/路径/参数值')
2.this.$router.push({
path:'/路径/参数值'
})
2.name 命名路由跳转
1.query传参
this.$router.push({
name:'路由名字',
query:{
参数名1:'参数值1',
参数名2:'参数值2'
}
})
2.动态路由传参
this.$router.push({
name:'路由名字',
params:{
参数名:'参数值'
}
})
6.综合案例:面经基础版(第82-87集)
一级路由/二级路由/导航高亮/请求渲染/路由传参
缓存组件：
1.问题:从面经 点到 详情页，又点返回，数据重新加载了→希望回到原来的位置
2.原因:路由跳转后，组件被销毁了，返回回来组件又被重建了，所以数据重新被加载了
3.解决:利用 keep-alive 将组件缓存下来
4.keep-alive是什么
keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。keep-alive 是一个抽象组件:它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。
5.keep-alive的优点
在组件切换过程中 把切换出去的组件保留在内存中，防止重复渲染DOM减少加载时间及性能消耗，提高用户体验性。
6.问题:缓存了所有被切换的组件
7.keep-alive的三个属性
1.include :组件名数组，只有匹配的组件会被缓存 //1和2通常分开用
2.exclude:组件名数组，任何匹配的组件都不会被缓存 //2和3通常一起用
3.max:最多可以缓存多少组件实例
8.小结
1.keep-alive是什么
Vue 的内置组件，包裹动态组件时，可以缓存
2.keep-alive的优点
组件切换过程中 把切换出去的组件保留在内存中(提升性能)
3.keep-alive的三个属性(了解)
1.include : 组件名数组，只有匹配的组件会被缓存
2.exclude :组件名数组，任何匹配的组件都不会被缓存
3.max:最多可以缓存多少组件实例
4.keep-alive的使用会触发两个生命周期函数(了解)
1.activated当组件被激活(使用)的时候触发 → 进入页面触发
2.deactivated 当组件不被使用的时候触发 → 离开页面触发
