Vue路由守卫

Vue路由守卫介绍：

 Vue的路由守卫就是当我们进⾏⻚⾯跳转的时候会触发的钩⼦函数, 我们把它称之为vue的路由守卫

Vue的路由守卫分为3种： 

全局路由守卫，组件路由守卫和路由独享守卫

1、全局路由守卫：

// 在router的js文件里需要先引入vue和vue-router
import Vue from "vue";
import VueRouter from "vue-router";

//实例化vue-router
const router = new VueRouter({
  routes,
});

// 以上步骤不能少，才能创建全局路由守卫
//全局路由守卫分为前置守卫和后置守卫
//里面都有三个参数：    to---要进⼊的路由     from---离开之前的路由   
//只有前置守卫有    next---进⼊下⼀个路由
//后置守卫没有    next---进⼊下⼀个路由

//前置守卫
router.beforeEach((to, from, next) => {
  next()
});


//后置守卫
router.afterEach((to,from)=>{})

2、组件路由守卫

// 组件的 都会有 三个参数 to from next，写法是和data同级的
// beforeRouteEnter -- 路由进入之前
// beforeRouteUpdate -- 路由更新之前 (特定的指 组件没变；路由变了--动态路由)
// beforeRouteLeave  --- 路由离开之前


// beforeRouteEnter -- 路由进入之前
beforeRouteEnter(to,from,next){
   next()
},

// beforeRouteUpdate -- 路由更新之前 (特定的指 组件没变；路由变了--动态路由)
beforeRouteUpdate(to,from,next){
   next()
},

// beforeRouteLeave  --- 路由离开之前
beforeRouteLeave(to,from,next){
   next()
}

3、路由独享守卫

// 路由独享守卫 也是有三个参数， to from next ，不过是写在路由配置里面的
// 只守卫当前的路由配置

// beforeEnter

{
    path: "/",
    name: "Home",
    component: Home,
    beforeEnter(to,from,next){
        next()
    }
},

作用：

Vue的路由守卫在项⽬中我们经常使⽤路由守卫实现⻚⾯的鉴权 

当⽤户登录之后,我们会把后台返回的token以及⽤户信息保存到vuex 和本地,当⻚⾯进⾏跳转的时候,我们会在路由守卫⾥⾯获取vuex⾥⾯的token,如果token存在的话,我们则使⽤next让他进⼊要 跳转的⻚⾯,如果token不存在的话我们使⽤next⽅法让他回到登录⻚

以上只是个人的理解：

详细请参考：Vue.js (vuejs.org)   Vue的官网