路由基本概念和使用
基本概念
路由是URL路径和组件的一种映射关系
本质是一个由Vue官方提供的集成包，能够更方便的根据路径的不同来切换组件
使用
下包
yarn add vue-router
导包
main.js
import VueRouter from 'vue-router'
挂载
main.js
Vue.use(VueRouter)
导入路由组件
import component1 from '组件路径';
import component2 from '组件路径';
import component3 from '组件路径';
...
配置路由匹配规则
let routes = [
{
path:路径,
component:组件名
},
{
path:路径,
component:组件名2
},
{
path:路径,
component:组件名3
},
]
创建路由实例并配置路由参数
main.js
let router = new VueRouter({
routes(简写，原本为 routes:routes)
})
路由注入
new Vue({
router
})
使用路由组件
VueRouter 提供给开发者两个组件
一个负责路由跳转的 router-link-to
一个负责显示跳转的 router-view
所以只需要在组件中直接嵌套使用 router-view
<router-view></router-view>
声明式导航
基本概念
声明式导航是 a 标签的一种上位替代，能够高亮被点击的元素，并且根据路由模式自动的映射地址
使用
<router-link to="路由参数"></router-link>
注意：路由参数无需添加 # 号，区别 a 标签，router-link-to 会自动的添加 #
传参
因为路由的跳转是基于链接，那么是否可以通过路由链接来实现参数的传递？答案是肯定的，router 的设计者也实现了通过链接来传递参数的功能
查询参数传参
和 ajax 的网络请求一样，路径后面的 ?属性名=属性值&属性名2=属性值2&属性名3=属性名3... 也同样适用在 router 中
<router-link to="路由路径?属性=值&属性2=值2?属性3=值3..."
取值是通过 $route 对象来取值
this.$route.query.属性名
this.$route.quert.属性名2
this.$route.quert.属性名3
...
路由参数传参
区别与查询参数传参，路由参数需要提前在匹配规则中定义传参的属性名
routes:[{path:'路由路径/:属性名/:属性名2/：属性名3...',component:组件名}]
传参时通过路由参数传参
<router-link to="路由路径/值/值2/值3..."></router-link>
取值也同样通过 $route 对象来取值
this.$route.params.属性名
this.$route.params.属性名2
this.$route.params.属性名3
...
高亮模式
在 router-link-to 的路由链接被点击后，会给当前的链接选项添加两个类名，一个是 router-link-active ，另一个则是 router-link-exact-active
router-link-active
router-link-active 是一个模糊匹配后的产物，她会根据 location.hash 来匹配 to 属性的值，只要 location.hash 包含了 to 中的值，那么就会给点击的链接添加一个 router-link-active 属性
router-link-exact-active
router-link-exact-active 是精准匹配的产物，她会匹配 location.hash 和 to 的属性值，如果两者完全相等，则会向被点击的链接添加 router-link-exact-active ，否则不会添加改类名
作用
一般来说给链接高亮只用给 router-link-active 添加类名即可
编程式导航
基本概念
使用 js 来控制路由的跳转而不是使用 router-link-to 或者是 a 标签
使用
编程式导航需要配合 $router 对象来实现跳转
$router.push({
path:'路由路径',
name:'路由名'
})
一般来说只取 path 或者 name 来控制跳转
传参
编程式导航的传参和声明式传参类似，只是传递参数的方式不同
传参
$.router.push({
path:'路由路径'，
name:'路由名',
query:{
属性:值,
属性2:值2
属性3:值3
...
},
params:{
属性:值,
属性2:值2，
属性3:值3
...
}
})
注意：查询参数传参(query )在传递参数的时候会默认忽略掉 params 参数，并且 params 参数在接收的时候可以不用再写 "路由路径/:属性名/:属性名2:/属性名3"
推荐使用 name + params 或者 path + query ，其实 name + params 更好，因为参数不会显示在浏览器地址栏中
嵌套和守卫
嵌套
基本概念
多数情况下，路由的跳转也是存在有嵌套的，也就是常说的二级tab栏
使用
向父路由匹配规则中添加子路由匹配规则
main.js
routes:[
{
path:'父路由路径',
component:父组件名,
children:[
{
path:'子路由路径',
component:子组件名
}
]
}
]
添加二级导航路由路径
<router-link to="父路由路径/子路由路径"></router-link>
注意：子路由在配置匹配规则的时候禁止添加 / 斜杠，router会自动的拼接二级路由路径
守卫
概念
在路由跳转的某一时刻自动调用的函数，就是守卫
全局前置守卫使用
全局前置守卫也就是在路由跳转之前调用的函数，这个函数能够对路由的跳转进行权限控制
main.js
const router = new VueRouter()
router.beforeEach(callback)
router.beforeEach函数接收一个回调函数作为参数
callback(to,from,next) {
to 路由对象，去往哪里，也就是跳转目标路由
from 路由对象，从哪里来，也就是跳转路由
next 路由方法，必须调用的一个函数，用来对跳转进行操作，也是路由的控制方法
}
权限控制
守卫中的 next 方法能够对跳转进行控制，可以手动定义是否跳转目标路由，或者修改路由靶向
router.beforeEach((to,from,next)=>{
next() 放行
next(false) 禁止跳转
next('路由路径') 修改路由跳转靶向
})
重定向与路由模式
重定向
定义
能够在路由跳转后进入默认的组件内一种操作方法
使用
routes:[
{path:'/',redirect:'路由路径'}
]
在路由跳转到根路径的时候，会自动补全路径，并进入对应路径的组件页面
路由模式
决定是否在地址栏显示 # ,也就是路由链接的跳转方式是否携带 #
默认的路由模式是 hash 模式(携带 # ),可以手动修改为 history 模式(不携带 #)
new VueRouter({
routes,
mode:'history'
})
注意：history模式需要得到服务器的支持，因为链接的跳转如果不携带#,和请求方式相似，一定程度上会被浏览器认为是发起了请求，所以一定要确保服务器支持 history 的跳转模式
404组件
如果出现了未查找到的路由地址，需要提示用户路径错误，也就是需要添加一个新的匹配规则
routes:[
{path:"*",component:NotFount}
]
注意，通配规则需要添加到匹配规则的末尾，路由的匹配规则是从数组的 0 下标开始到末尾下标依次命中，只要命中就会停止匹配，如果全部未匹配则会跳转到空白内容，所以只要在末尾添加统配匹配即可
组件缓存
定义
组件缓存是一种能够将组件写入内存而确保其不被销毁的技术
使用
基本使用
路由在跳转的时候会自动的将其销毁，在跳转回来的时候，也会自动的创建
<keep-alive>
<router-view></router-view>
</keep-alive>
只需要将需要被保护的组件包裹在内即可
手动保护
设定被保护的组件
<keep-alive include="被保护的组件名"></keep-alive>
即只有被设定的组件会被保护，其他的组件都不会被保护
设定不被保护的组件
<keep-alive exclude="不被保护的组件名"></keep-alive>
即其他的组件都会被保护，只有被设定的组件不会被保护
缓存钩子
定义
是一种被缓存的组件被激活或者缓存的时候触发的声明周期函数
使用
激活钩子
当组件被激活的时候触发的钩子
export default{
activated() {
操作表达式
}
}
缓存钩子
当组件被缓存的时候触发的钩子
export default {
deactivated() {
操作表达式
}
}
注意：缓存钩子只对存在被缓存的组件生效，正常的组件(没有被 keep-alive 包裹)不会触发缓存钩子
