vue-router的导航钩子怎么用

这篇文章主要讲解了“vue-router的导航钩子怎么用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“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:——

File文件
——,

  beforeRouteEnter (to, from, next) {

    // …do something

  },

  beforeRouteUpdate (to, from, next) {

     // …do something

  },

  beforeRouteLeave (to, from, next) {

    // …do something

  }

}

感谢各位的阅读,以上就是“vue-router的导航钩子怎么用”的内容了,经过本文的学习后,相信大家对vue-router的导航钩子怎么用这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!


文章名称:vue-router的导航钩子怎么用
文章转载:http://ybzwz.com/article/gpchjs.html