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>