vue-router的导航钩子

vue-router中有7个钩子函数,主要分3类:
 
全局钩子
 
前置守卫:router.beforeEach;
 
后置守卫:router.afterEach;
 
全局解析守卫:router.beforeResolve;
 
注意:全局解析守卫(router.beforeResolve)是在所有组件内守卫和异步路由组件被解析之后(导航被确认之前)调用。
 
路由独享钩子
 
路由独享钩子:单个路由独享的导航钩子,是在路由配置上直接定义的。
 
beforeEnter(路由独享守卫);
 
const router = new VueRouter({
 
  routes: [
 
    {
 
      path: “/setting”,
 
      component: () => import(”@/components/setting.vue”),
 
      beforeEnter: (to, from, next) => {
 
        console.log(”beforeEnter”);
 
        // do something
 
        next();
 
      },
 
    },
 
  ],
 
});
 
钩子函数有三个参数:to、from、next()
 
to:router即将进入的路由对象;
 
from:当前导航即将离开的路由;
 
next():是一个function,进行管道中的一个钩子,如果执行完了,那导航的状态就是 confirmed(确认的),否则为false,终止导航。
 
组件内导航钩子
 
beforeRouteEnter:执行时间 ==> 渲染该组件的对应路由被 confirm 之前;
 
beforeRouteUpdate:执行时间 ==> 当前路由已经改变,但是依然渲染该组件时;
 
beforeRouteLeave:执行时间 ==> 导航离开该组件的对应路由时;
 
这三种导航钩子是在路由组件内部直接定义的。
 
const File = {
 
  template:——<div>File文件</div>——,
 
  beforeRouteEnter (to, from, next) {
 
    // …do something
 
  },
 
  beforeRouteUpdate (to, from, next) {
 
     // …do something
 
  },
 
  beforeRouteLeave (to, from, next) {
 
    // …do something
 
  }
 
}

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h64198.shtml

张贴在3