路由
路由是什么？
一个路由（route）就是一组映射关系，（key-value），多个路由需要路由器（router）进行管理
前端路由：key是路径，value是组件
基本使用
1.安装vue-router, 命令：npm ivue-router
2.应用插件：Vue.use(VueRouter)
3.编写router基本配置项：
//配置路由文件
//映入VueRouter（路由）
import VueRouter from "vue-router";
//引入组件
import About from "@/components/About";
import Home from "@/components/Home";
//暴露router
export default new VueRouter({
//routes配置路由
routes:[
{
//配置路由路径
path:'/about',
//这个路由指定的组件（路由组件）
component:About
},
{
//配置路由路径
path:'/home',
//这个路由指定的组件（路由组件）
component:Home
}
]
})
4.实现切换（active-class可配置高亮样式）
<!--借助router-link实现路由的切换-->
<router-link class="a1" active-class="active" to="/about">About</router-link>
//router-link标签属性to：填写指定的路由路径，指定的路由路径对应着路由组件，点击把路由组件显示到router-view指定位置（路由跳转）
5.指定路由组件显示位置
<!--指定路由组件呈现位置-->
<router-view></router-view>
二、几个注意点
1.路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹
2.通过切换，”隐藏“了的路由组件，默认是被销毁掉的，需要的时候再去挂载
3.每个组件都有自己的$route属性，里面存储着自己的路由信息
4.整个应用只有一个router，可以通过组件的$router属性获取到
三、路由的嵌套（多级路由）
1.配置路由规则，使用chlldern配置项：
router:[
{
//路由路径
path:'/home'
//路由组件
component:Home
//配置home的子路由
childeren:[
{
//子路由路径，配置子路由路径不需要写“/”,脚手架会自动加上“/”
path:'news'，
//子路由组件
component:News
}
]
}
]
2.跳转（要写完整的路径）：
<router-link to="/home/news">News</router-link>
四、路由的query参数
1.传递参数
<!-- 跳转并携带query参数,to的字符串写法,?之后就开始写query参数-->
<router-link :to="/home/message/detail?id=666&title=你好">跳转</router>
<!--跳转并携带query参数,to的对象写法-->
<router-link
:to="{
path:'/home/message/detail',
//query参数
query:{
id:666,
title:'你好'
}
}"
>跳转</router>
2.接收参数：
$router.query.id
$router.query.title
五、命名路由
1.作用：可以简化路由的跳转
2.如何使用 1.给路由命名：
//routes配置路由
routes:[
{
//配置路由路径
path:'/home',
//这个路由指定的组件
component:Home,
children:[//通过children配置home子路由
{
path:'message',
component:Message,
children:[//通过children配置message子路由
{
name:'info',//给路由命名
path:'info',
component:Info
}
]
}
]
}
]
2.简化跳转
<!--简化前，需要写完整的路径-->
<router-link to='/home/message/info'>跳转</router>
<!--简化后，直接通过名字跳转-->
<router-link :to='{name:'info'}'>跳转</router>
<!--简化写法配合传递参数-->
<router-link
:to='{
name:'info',
query:{
id:666,
title:'你好'
}
}'>跳转</router>
六、路由的params参数
1.配置路由，声明接收params参数
{
name:'message',
path:'message',
component:Message,
children:[
{
name:'info',
path:'info/:id/:name',//使用占位符声明接收params
component:Info
}
]
}
2.传递参数
<!--跳转并携带params参数，to的字符串写法-->
<router-link class="info" :to="`/home/message/info/666/你好`">跳转</router-link>
<!--跳转并携带params参数，to的对象写法-->
<router-link
:to="{
name:'info',
params:{//params参数
id:666,
name:'你好'
}
}"
>跳转</router-link></li>
特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！
3.接收参数
$router.params.id
$router.params.name
七、路由的props配置
作用：让路由组件更方便的收到参数
{
name:'info',
path:'info/:id/:name',
component:Info,
//props第一种写法：props值为对象，该对象中所有key-value值都会通过props传入info组件
props:{id:'666',name:'你好'}
//props第二中写法：props值为布尔值，布尔值为true是则该路由接收的所有params参数通过props传入info组件
props:true
//props第三中写法，props为一个函数回调，该函数会返回每一组key-value通过props传入info组件
//当调用props函数回调时，props会接收一个$router参数，供我们使用
props({query}){//用到了对象解构，把$router中的query单独拿出来使用
return{
id: query.id,
name: query.name
}
}
}
八、<router-link>的replace属性
1.作用：控制路由跳转是操作浏览器历史记录的模式
2.浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录，replace是替换当前记录，路由跳转时候默认为push
3.如何开启replace模式：<router-link replace......>Message</router-link>
九、编程式路由导航
1.作用：不借助实现跳转，让路由跳转更加灵活
2.具体编码：
//$router的两个API
//push跳转
this.$router.push({
name:'message',
params:{
id:xxx,
title:xxx
}
})
//replace跳转
this.$router.replace({
name:'message',
params:{
id:xxx,
title:xxx
}
})
十、缓存路由组件
1.<keep-alive includ="组件名">作用：让不展示的路由组件保持挂载，不被销毁（保持被激活状态）
2.具体编码：
<keep-alive includ="组件名">
<router-view></router-view>
</keep-alive>
十一、两个新的生命周期钩子
路由组件所独有的两个钩子，用于捕获路由组件的激活状态
1.activated：路由组件被激活时触发
1.deactivated：路由组件失活时触发
十二、路由守卫
1.路由守卫的作用：对路由进行权限控制
2.分类：全局守卫、独享守卫、组件内守卫
- 3.全局守卫：
router.beforeEach((to,from,next)=>{...}) 全局前置守卫
router.afterEach((to,form)=>{...}) 全局后置守卫
参数：
to：当前路由
from：是从哪个路由切换到当前路由的
next：放行
//全局前置守卫，初始化时执行、每次路由切换前执行
router.beforeEach((to,form,next)=>{
if(to.meta.isAuth){//判断当单前路由是否需要进行权限控制
if(localStorage.getItem('School')==='xxx'){//权限控制的具体规则
next()//放行
}else{
alert('没有权限查看')
}
}else{
next()//放行
}
})
//全局后置路由守卫，初始化时执行、每次路由切换后执行
router.afterEach((to,form)=>{
if(to.meta.title){
document.title=to.meta.title//修改网页标题
}
})
- 4.独享守卫：
beforeEnter((to,from,next)=>{...}) 独享守卫
//设置news的独享守卫，beforeEnter独享守卫
beforeEnter(to,from,next){
if(to.meta.isAuth){//判断当前路由是否需要进行权限控制
if(localStorage.getItem('School')==='xxx'){
next()
}
else{
alert('学校名称不对')
}
}
else{
next()
}
}
- 5.组件内守卫
//进入守卫，通过路由规则，进入该组件时被调用
beforeRouteEnter(to,from,next){......}
//离开守卫，通过路由规则，离开该组件时被调用
beforeRouteLeave(to,from,next){......}
十三、路由的两种工作模式
1.对于一个url来说，什么是hash值？————#及其后面的内容就是hash值。
2.hash值不会包含在HTTP请求中，即：hash值不会带给服务器
3.hash模式：
1.地址中永远带着#号，不美观。
2.若以后将地址通过第三方手机app分享，若app效验严格，则地址标记为不合法。
3.兼容性较好。
4.history模式：
1.地址干净，美观。
2.兼容性和hash模式相比略差。
3.应用部署上线是需要后端人员支持，解决刷新页面服务端404的问题。
5.配置路由工作模式
const router= new VueRouter({
mode:history//配置为history工作模式，不配置则默认为hash模式
})
