理解、使用 beforeRouteEnter 前置守卫

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/Reagan_/article/details/98877273

前置守卫（路由守卫/导航守卫）：

• 怎么理解？
  就像在组件前面守卫的士兵一样，满足条件才能访问组件。
  举个例子，比如在没登陆之前不能进入个人中心。
• 咋实现的？
  请求getUser接口，获取里面的状态值status，如果是0，说明登录过了，不是0，没登陆，直接next到登录页面去。

beforeRouteEnter(to,from,next){
    axios.get('/api2/users/getUser').then((res)=>{
        var status=res.data.status;
        if(status === 0){
            next(vm=>{
                vm.$store.commit('user/USER_NAME',{name:res.data.data.username});
            });
        }else{
            next('/mine/login');
        }
    });
}

to:去哪里
form:来自于哪里
next:向下执行，如果不调用next就不往下走了，如果调用next就继续往下走下面的流程。

• 什么时候调用？
  只要to和from代表的组件不一样就会调用。

注意：这个方法不能获取到this，因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。
不过，你可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。
像这样：

beforeRouteEnter (to, from, next) {
  next(vm => {
    // 通过 `vm` 访问组件实例
  })

更加详细的说明可以查看官方文档：官方文档