vue路由守卫 beforeEach、钩子

目录

1.全局钩子

2.某个路由独享钩子 

3.组件路由 

4.触发钩子的顺序

---

1.全局钩子

主要包括beforeEach和aftrEach,

beforeEach函数有三个参数：
to:router即将进入的路由对象
from:当前导航即将离开的路由
next:Function,进行管道中的一个钩子，如果执行完了，则导航的状态就是 confirmed （确认的）；否则为false，终止导航。
    afterEach函数不用传next()函数
这类钩子主要作用于全局,一般用来判断权限,以及以及页面丢失时候需要执行的操作,例如就像上面的

router.beforeEach((to, from, next) => {
  console.log(store.state.token);
  // to: Route: 即将要进入的目标 路由对象
  // from: Route: 当前导航正要离开的路由
  // next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
  const route = ["index", "list"];
  let isLogin = store.state.token; // 是否登录
  // 未登录状态；当路由到route指定页时，跳转至login
  if (route.indexOf(to.name) >= 0) {
    if (isLogin == null) {
      router.push({ path: "/login" });
    }
  }
  // 已登录状态；当路由到login时，跳转至home
  console.log(to.name);
  localStorage.setItem("routerName", to.name);
  if (to.name === "login") {
    if (isLogin != null) {
      router.push({ path: "/HomeMain" });
    }
  }
  next();
});

2.某个路由独享钩子 

某个路由单独使用的，本质上和后面的组件内钩子是一样的。都是特指的某个路由。不同的是，这里的一般定义在router当中，而不是在组件内。如下

{
  path: '/dashboard',
  component: resolve => require(['../components/page/Dashboard.vue'], resolve),
  meta: { title: '系统首页' },
  beforeEnter: (to, from, next) => {

  },
  beforeLeave: (to, from, next) => {

  }
}

3.组件路由 

主要包括 beforeRouteEnter和beforeRouteUpdate ,beforeRouteLeave,这几个钩子都是写在组件里面也可以传三个参数(to,from,next),作用与前面类似.

beforeRouteLeave(to, from, next) {
  // ....
  next()
},
beforeRouteEnter(to, from, next) {
  // ....
  next(vm => {
    //因为当钩子执行前，组件实例还没被创建
    // vm 就是当前组件的实例相当于上面的 this，所以在 next 方法里你就可以把 vm 当 this 来用了。
    console.log(vm);//当前组件的实例
  });
},
beforeRouteUpdate(to, from, next) {
  // ....
  next()
},
computed: { },
method: { }

官网介绍

to: Route:              //即将要进入的目标 路由对象
from: Route:          //当前导航正要离开的路由
next: Function:       //一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
next():                  //进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed （确认的）。
next(false):           //中断当前的导航。如果浏览器的 URL 改变了（可能是用户手动或者浏览器后退按钮），那么 URL 地址会重置到 from 路由对应的地址。
next(‘/’)               //或者 next({ path: ‘/’ }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。

4.触发钩子的顺序

将路由导航、keep-alive、和组件生命周期钩子结合起来的，触发顺序，假设是从a组件离开，第一次进入b组件：

beforeRouteLeave:路由组件的组件离开路由前钩子，可取消路由离开。
beforeEach: 路由全局前置守卫，可用于登录验证、全局路由loading等。
beforeEnter: 路由独享守卫
beforeRouteEnter: 路由组件的组件进入路由前钩子。
beforeResolve:  路由全局解析守卫
afterEach:路由全局后置钩子
beforeCreate:组件生命周期，不能访问this。
created:组件生命周期，可以访问this，不能访问dom。
beforeMount:组件生命周期
deactivated: 离开缓存组件a，或者触发a的beforeDestroy和destroyed组件销毁钩子。
mounted:访问/操作dom。
activated:进入缓存组件，进入a的嵌套子组件(如果有的话)。
执行beforeRouteEnter回调函数next。