這篇文章主要講解了“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:——<div>File文件</div>——，
beforeRouteEnter （to, from, next） {
// …do something
},
beforeRouteUpdate （to, from, next） {
// …do something
},
beforeRouteLeave （to, from, next） {
// …do something
}
}
感謝各位的閱讀，以上就是“vue-router的導航鉤子怎么用”的內容了，經過本文的學習后，相信大家對vue-router的導航鉤子怎么用這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
