作用：对路由进行权限控制
分类：全局守卫、独享守卫、组件内守卫
目录
一、全局前置路由守卫router.beforeEach（切换之前调用，to、from、next参数）
改进代码
二、全局后置路由守卫router.afterEach（ 切换之后调用，to、from参数，没有next参数）
三、独享路由守卫beforeEnter（某一个路由所单独享用的，只有前置没有后置）
四、组件内路由守卫（在组件内编写）
beforeRouteEnter 进入前
beforeRouteLeave 离开后
一、全局前置路由守卫router.beforeEach（切换之前调用，to、from、next参数）
全局前置路由守卫——初始化的时候被调用、每次路由切换之前被调用
// 该文件专门用于穿件整个应用的路由器
import VueRouter from 'vue-router'
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'
// 创建一个路由器
const router = new VueRouter({
routes:[
// 一级路由
{
name:'guaunyu',
// 如果路径是 /about 我们就展示About这个名字的组件
path:'/about',
component: About
},
{
name:'zhuye',
path:'/home',
component: Home,
// 二级路由
children:[
{
name:'xinwen',
// 二级路由不加斜杠
path:'news',
component:News
},
{
// 二级路由不加斜杠
path:'message',
component:Message,
// 三级路由
children:[
{
name:'xiangqing',
path:'detail/:id/:title',
component:Detail,
// props的第一种写法，值为对象 所有key-value都会一props的形式传给Detail组件
// props:{a:1,b:'hello'}
// props的第二种写法，值为布尔值,若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件
// props:true
// props的第三种写法，值为函数
props($route){
return{
id:$route.params.id,
title:$route.params.title,
}
}
}
]
}
]
},
]
})
// 暴露之前添加路由守卫
// 全局前置路由守卫
// 有A路由向B路由跳转时 只要形成路由跳转，在切换之前进行调用（每一次切换之前进行调用）
// 除此之外还有初始化的时候被调用
router.beforeEach((to,from,next)=>{
// console.log(to,from)
// if(to.name==='xinwen' || to.name==='xiaxoi') 这种写法也可以
if(to.path ==='/home/news' || to.path ==='/home/message'){
if(localStorage.getItem('school' ) === 'atguigu'){
next()
}else{
alert('学校名不对，无权限查看')
}
}else{
next()
}
})
export default router
如下如所示，如果我们校验的情况下很多，我们不可能一个一个的校验，那样比较麻烦，我们也不是很推荐下面这种写法，下面我们再学习一个新的
改进代码
// 该文件专门用于穿件整个应用的路由器
import VueRouter from 'vue-router'
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'
// 创建一个路由器
const router = new VueRouter({
routes:[
// 一级路由
{
name:'guaunyu',
// 如果路径是 /about 我们就展示About这个名字的组件
path:'/about',
component: About,
},
{
name:'zhuye',
path:'/home',
component: Home,
// 二级路由
children:[
{
name:'xinwen',
// 二级路由不加斜杠
path:'news',
component:News,
meta:{
// 是否授权
isAuth:true
}
},
{
// 二级路由不加斜杠
path:'message',
component:Message,
meta:{
// 是否授权
isAuth:true
},
// 三级路由
children:[
{
name:'xiangqing',
path:'detail/:id/:title',
component:Detail,
// props的第一种写法，值为对象 所有key-value都会一props的形式传给Detail组件
// props:{a:1,b:'hello'}
// props的第二种写法，值为布尔值,若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件
// props:true
// props的第三种写法，值为函数
props($route){
return{
id:$route.params.id,
title:$route.params.title,
}
}
}
]
}
]
},
]
})
// 暴露之前添加路由守卫
// 全局前置路由守卫
// 有A路由向B路由跳转时 只要形成路由跳转，在切换之前进行调用（每一次切换之前进行调用）
// 除此之外还有初始化的时候被调用
router.beforeEach((to,from,next)=>{
// 判断是否需要鉴定一下权限
if(to.meta.isAuth){
if(localStorage.getItem('school' ) === 'atguigu'){
next()
}else{
alert('学校名不对，无权限查看')
}
}else{
next()
}
})
export default router二、全局后置路由守卫router.afterEach（ 切换之后调用，to、from参数，没有next参数）
全局后置路由守卫——初始化的时候被调用、每次路由切换之后被调用
需求：当我们更换组件之后，要求页面的title也会跟着修改
我们应该先配置一下每个组件的meta对象，增加一个title属性，当我们点击这个组件的时候，获取这个title，将其放到页面的title上面
meta:{
// 是否授权
isAuth:true,
title:'详情'
},// 全局后置路由守卫——初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to,from)=>{
// 这个地方没有next了，因为已经切换完了，也没办法守卫了
// 因为如果运行这个函数的话，说明已经切换完了，我们完全可以修改网页的title了
document.title = to.meta.title || '硅谷系统'
})
三、独享路由守卫beforeEnter（某一个路由所单独享用的，只有前置没有后置）
需求：对某一个路由（新闻路由）做出限制
children:[
{
name:'xinwen',
// 二级路由不加斜杠
path:'news',
component:News,
meta:{
// 是否授权
isAuth:true,
title:'新闻'
},
beforeEnter:(to,from,next)=>{
// 判断是否需要鉴定一下权限
if(to.meta.isAuth){
if(localStorage.getItem('school' ) === 'atguigu'){
next()
}else{
alert('学校名不对，无权限查看')
}
}else{
next()
}
}
},
四、组件内路由守卫（在组件内编写）
beforeRouteEnter 进入前
通过路由规则，进入该组件时被调用文章来源：https://www.toymoban.com/news/detail-477081.html
// 通过路由规则，进入该组件时被调用
beforeRouteEnter (to, from, next) {
// 判断是否需要鉴定一下权限
if(to.meta.isAuth){
if(localStorage.getItem('school' ) === 'atguigu'){
next()
}else{
alert('学校名不对，无权限查看')
}
}else{
next()
}beforeRouteLeave 离开后
通过路由规则，离开该组件时被调用（这个不能说是后置，因为进入之后并不会触发 而是离开这个组件之前会触发）文章来源地址https://www.toymoban.com/news/detail-477081.html
// 通过路由规则，离开该组件时被调用
beforeRouteLeave (to, from, next) {
next()
}到了这里，关于Vue——路由守卫（全局前置路由守卫beforeEach、全局后置路由守卫router.afterEach、独享路由守卫beforeEnter、组件内路由守卫 ）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
