vue路由守卫简明操作笔记
路由守卫
1、作用：
路由守卫，简单理解来说就是，当用户要进行一些操作时，我需要用户的一些信息或数据或行为，我判断过后，才会同意用户进行操作，说到这里，我想大家心里都或多或少有点理解了吧，官方一点的解释就是进行操作的鉴权，当操作与之条件匹配时，操作成功，当操作与之不匹配时，操作终止，作用就是是对路由进行权限控制。
2、路由配置变化：
不使用路由守卫，我们的router/index.js是怎么写的：
// 引入依赖
import VueRouter from "vue-router"
//导入路由组件
import Home from "../pages/Home"
// 创建实例并配置
export default new VueRouter({
routes: [ //注意：路由配置项，名称 routes 没有r 没有r 没有r
{
path: '/home',
component: Home,
}
]
});
使用路由守卫，则应该这样写：
// 引入依赖
import VueRouter from "vue-router"
//导入路由组件
import Home from "../pages/Home"
// 创建实例并配置
// 变化点1：在这里声明变量router，接收对象，便于后面设置路由守卫
const router=new VueRouter({
routes: [
{
path: '/home',
component: Home,
}
]
});
//这里写 路由守卫的规则
//router.xxx.....
//变化点2 暴露写在最后
export default router
3、补充知识点：路由meta属性（路由元信息）
路由meta属性,简单来说就是路由元信息，也就是每个路由身上携带的信息,属性名、属性值自己定义。
meta的作用：路由元信息说白了就是通过meta对象中的一些属性，用于判断当前路由是否具有某一条件，便于进行判断和处理。
例如：
{
path: '/home',
component: Home,
//配置mate
mate:{
isAuth:true,
test:123
}
}
4、全局路由守卫
router.beforeEach 全局路由前置守卫,跳转前
router.beforeEach 全局路由后置守卫,跳转后
// 配置在实例对象外 初始化时调用，每次发生路由变化前调用
// 接收到三个参数：to 到哪去,from 从哪来,next 放行
router.beforeEach((to,from,next)=>{
console.log('beforeEach',to,from)
if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
if(判断某一条件){ //权限控制的具体规则
next() //放行
}else{
alert('暂无权限查看')
// next({name:'guanyu'}) 放行到指定路由
}
}else{
next() //放行
}
})
//全局后置守卫：初始化时执行、每次路由切换后执行
router.afterEach((to,from)=>{
console.log('afterEach',to,from)
if(to.meta.title){
document.title = to.meta.title //修改网页的title
}else{
document.title = 'vue_test'
}
})
5、独享路由守卫
某一条路由独享的规则，参数语法和全局一样 当访问这个路径前才执行
需要再配置规则时配置
例如：
{
path: '/home',
component: Home,
//配置mate
mate:{
isAuth:true,
test:123
},
beforeEnter(to,from,next){
console.log('beforeEnter',to,from)
if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
if(判断某一条件){
next()
}else{
alert('暂无权限查看')
// next({name:'guanyu'})放行到指定路由
}
}else{
next()
}
}
}
6、组件内路由守卫
放在组件配置项里，和methods同级别
<script>
export default {
name: 'Home',
//进入守卫：通过路由规则，进入该组件时被调用
beforeRouteEnter (to, from, next) {
},
//离开守卫：通过路由规则，离开该组件时被调用
beforeRouteLeave (to, from, next) {
}
};
</script>