文章目录
路由守卫
1. 分类
- 全局守卫
- 独享守卫
- 组件内守卫
一、全局路由守卫
1. 作用
- 全局路由守卫分为
全局_前置路由守卫和全局_后置路由守卫。- 对路由进行权限控制。
2. 基本代码
全局前置路由守卫：初始化的时候被调用、每次路由切换之前被调用。
router.beforeEach((to, from, next) => {
console.log('前置路由守卫', to, from);
if (to.meta.isAuth) {
//判断当前路由是否需要进行权限控制
if (localStorage.getItem('school') === 'shandong') {
//控制权限的具体规则
next() //放行
} else {
alert('学校名不对，无权限查看！')
}
} else {
next() //放行
}
})
全局后置路由守卫：初始化的时候被调用、每次路由切换之后被调用。
router.afterEach((to, from) => {
console.log('后置路由守卫', to, from);
if(to.meta.title) {
document.title = to.meta.title //修改网页的title
} else {
doument.title = 'vue_test'
}
})
3. 实例：路由守卫的拦截
- 当条件判断正确的时候（school 为 shandong），才能看到 News 和 Message 的信息。
- 利用全局守卫来授权。
全局路由守卫
index.js
- 给每个路由配置 meta。
- 给路由的标题命名：
meta: {title: 'xxx'}。- 开启查看权限：
meta: {isAuth: true, title: 'xxx'}
......
children: [{
name: 'xiangqing',
path: 'detail/:id/:title',
component: Detail,
meta: {
isAuth: true, //开始权限
title: '详情' //路由标题
},
props($route) {
return {
id: $route.params.id,
title: $route.params.title
}
}
}]
......
// 全局前置路由守卫——初始化的时候被调用、每次路由切换之前被调用
router.beforeEach((to, from, next) => {
console.log('前置路由守卫', to, from);
if (to.meta.isAuth) {
if (localStorage.getItem('school') === 'shandong') {
next()
} else {
alert('学校名不对，无权限查看！')
}
} else {
next()
}
})
// 全局后置路由守卫——初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to, from) => {
console.log('后置路由守卫', to, from);
document.title = to.meta.title || '初始页'
})
二、独享路由守卫
1. 作用
只对当前路由进行权限控制。
2. 实例：独享守卫的拦截
独享路由守卫
- 只对 News 这一个路由组件进行权限控制。
- 独享守卫可以与全局守卫一起使用。
......
name: 'xinwen',
path: 'news',
component: News,
meta: {
isAuth: true,
title: '新闻'
},
beforeEnter: (to, from, next) => {
console.log('独享路由守卫', to, from);
if (to.meta.isAuth) {
if (localStorage.getItem('school') === 'shandong') {
next()
} else {
alert('学校名不对，无权限查看！')
}
} else {
next()
}
}
......
router.afterEach((to, from) => {
document.title = to.meta.title || '初始页'
console.log('后置路由守卫', to, from);
})
三、组件内路由守卫
1. 两个守卫
- 进入守卫：通过路由规则，进入该组件时被调用。
- 离开守卫：通过路由规则，离开该组件时被调用。
2. 基本语法
//进入守卫
beforeRouteEnter(to, from, next) {
...}
//离开守卫
beforeRouteLeave(to, from, next) {
...}
3. 实例：组件内的守卫
组件内守卫
About.vue
- 组件内的守卫也可以和其他守卫一起使用。
<template>
<h2>我是About的内容</h2>
</template>
<script>
export default {
name: "myAbout",
// 通过路由规则，进入该组件时被调用
beforeRouteEnter(to, from, next) {
console.log("About——beforeRouteEnter", to, from);
if (to.meta.isAuth) {
if (localStorage.getItem("school") === "shandong") {
next();
} else {
alert("学校名不对，无权限查看！");
}
} else {
next();
}
},
// 通过路由规则，离开该组件时被调用
beforeRouteLeave (to, from, next) {
console.log("About——beforeRouteLeave", to, from);
next()
}
};
</script>
不积跬步无以至千里 不积小流无以成江海
点个关注不迷路（持续更新中…）