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:&mdash;&mdash;<div>File文件</div>&mdash;&mdash;，

  beforeRouteEnter （to, from, next） {

    // &hellip;do something

  },

  beforeRouteUpdate （to, from, next） {

     // &hellip;do something

  },

  beforeRouteLeave （to, from, next） {

    // &hellip;do something

  }

}

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