這篇文章主要講解了“vue-router的導(dǎo)航鉤子怎么用”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“vue-router的導(dǎo)航鉤子怎么用”吧！

“只有客戶發(fā)展了，才有我們的生存與發(fā)展！”這是創(chuàng)新互聯(lián)建站的服務(wù)宗旨！把網(wǎng)站當(dāng)作互聯(lián)網(wǎng)產(chǎn)品，產(chǎn)品思維更注重全局思維、需求分析和迭代思維，在網(wǎng)站建設(shè)中就是為了建設(shè)一個(gè)不僅審美在線，而且實(shí)用性極高的網(wǎng)站。創(chuàng)新互聯(lián)對(duì)成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、網(wǎng)站開發(fā)、網(wǎng)頁設(shè)計(jì)、網(wǎng)站優(yōu)化、網(wǎng)絡(luò)推廣、探索永無止境。

vue-router中有7個(gè)鉤子函數(shù)，主要分3類：

全局鉤子

前置守衛(wèi)：router.beforeEach；

后置守衛(wèi)：router.afterEach；

全局解析守衛(wèi)：router.beforeResolve；

注意：全局解析守衛(wèi)（router.beforeResolve）是在所有組件內(nèi)守衛(wèi)和異步路由組件被解析之后（導(dǎo)航被確認(rèn)之前）調(diào)用。

路由獨(dú)享鉤子

路由獨(dú)享鉤子：?jiǎn)蝹€(gè)路由獨(dú)享的導(dǎo)航鉤子，是在路由配置上直接定義的。

beforeEnter（路由獨(dú)享守衛(wèi)）；

const router = new VueRouter（{

  routes: [

    {

      path: "/setting",

      component: （） => import（"@/components/setting.vue"），

      beforeEnter: （to, from, next） => {

        console.log（"beforeEnter"）;

        // do something

        next（）;

      },

    },

  ],

}）;

鉤子函數(shù)有三個(gè)參數(shù)：to、from、next（）

to：router即將進(jìn)入的路由對(duì)象；

from：當(dāng)前導(dǎo)航即將離開的路由；

next（）：是一個(gè)function，進(jìn)行管道中的一個(gè)鉤子，如果執(zhí)行完了，那導(dǎo)航的狀態(tài)就是 confirmed（確認(rèn)的），否則為false，終止導(dǎo)航。

組件內(nèi)導(dǎo)航鉤子

beforeRouteEnter：執(zhí)行時(shí)間 ==> 渲染該組件的對(duì)應(yīng)路由被 confirm 之前;

beforeRouteUpdate：執(zhí)行時(shí)間 ==> 當(dāng)前路由已經(jīng)改變，但是依然渲染該組件時(shí);

beforeRouteLeave：執(zhí)行時(shí)間 ==> 導(dǎo)航離開該組件的對(duì)應(yīng)路由時(shí);

這三種導(dǎo)航鉤子是在路由組件內(nèi)部直接定義的。

const File = {

  template:——

  beforeRouteEnter （to, from, next） {

    // …do something

  },

  beforeRouteUpdate （to, from, next） {

     // …do something

  },

  beforeRouteLeave （to, from, next） {

    // …do something

  }

}

感謝各位的閱讀，以上就是“vue-router的導(dǎo)航鉤子怎么用”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)vue-router的導(dǎo)航鉤子怎么用這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！