Vue——路由守卫(全局前置路由守卫beforeEach、全局后置路由守卫router.afterEach、独享路由守卫beforeEnter、组件内路由守卫 )

我爱布朗熊 2022-09-23 08:05:10 阅读数:392

vue路由全局前置守卫

 作用:对路由进行权限控制

分类:全局守卫、独享守卫、组件内守卫

目录

一、全局前置路由守卫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 进入前 

通过路由规则,进入该组件时被调用

 // 通过路由规则,进入该组件时被调用
beforeRouteEnter (to, from, next) {
// 判断是否需要鉴定一下权限
if(to.meta.isAuth){
if(localStorage.getItem('school' ) === 'atguigu'){
next()
}else{
alert('学校名不对,无权限查看')
}
}else{
next()
}

 beforeRouteLeave 离开后 

通过路由规则,离开该组件时被调用(这个不能说是后置,因为进入之后并不会触发 而是离开这个组件之前会触发)

 // 通过路由规则,离开该组件时被调用
beforeRouteLeave (to, from, next) {
next()
}

版权声明:本文为[我爱布朗熊]所创,转载请带上原文链接,感谢。 https://blog.csdn.net/weixin_51351637/article/details/126995759