這篇文章帶大家了解一下面試必問的事物---Vue-Router中的導航鉤子，希望多大家有幫助！
「導航」表示路由正在改變。
vue-router 提供的導航守衛主要用來透過跳轉或取消的方式守衛導航。有多種機會植入路由導航過程中：全局的, 單一路由獨享的, 或組件級的。 【相關推薦：《vue.js教學》】
router.beforeEach 註冊一個全域前守衛：
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// to:要去哪个页面
// from:从哪里来
// next:它是一个函数。
// 如果直接放行 next()
// 如果要跳到其它页 next(其它页)
})範例程式碼：
router.beforeEach(async(to, from, next) => {
NProgress.start() // 开启进度条
const token = store.state.user.token
const userId = store.state.user.userInfo.userId
console.log(token, to.path, from.path)
if (token) {
if (to.path === '/login') { // 有 token还要去login
next('/')
NProgress.done() // 关闭进度条
} else { // 有 token，去其他页面，放行
if (!userId) {
await store.dispatch('user/getUserInfo')
}
next()
}
} else {
if (to.path === '/login') { // 没有token，去login，放行
next()
} else {
next('/login') // 没有token，去其他页面
NProgress.done()
}
}
})router.afterEach 註冊一個全域後置鉤子：
你也可以註冊全域後置鉤子，然而和守衛不同的是，這些鉤子不會接受 next 函數也不會改變導航本身：
router.afterEach((to, from) => {
// ...
})在2.5.0 你可以用 router.beforeResolve 註冊一個全域守衛。這和 router.beforeEach 類似，差異是在導航被確認之前，同時在所有元件內守衛和非同步路由元件被解析之後，解析守衛就被呼叫。
你可以在路線設定上直接定義 beforeEnter 守衛：
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})beforeRouteEnterbeforeRouteUpdate (2.2 新增)#beforeRouteLeaveconst Foo = {
template: `...`,
beforeRouteEnter(to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不！能！获取组件实例 `this`
// 因为当守卫执行前，组件实例还没被创建
},
beforeRouteUpdate(to, from, next) {
// 在当前路由改变，但是该组件被复用时调用
// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
},
beforeRouteLeave(to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
}
}導航被觸發。
在失活的元件裡呼叫 #beforeRouteLeave 守衛。
呼叫全域的 beforeEach 守衛。
在重複使用的元件裡呼叫 beforeRouteUpdate 守衛 (2.2 )。
在路由設定中呼叫 beforeEnter。
解析非同步路由元件。
在被啟動的元件裡呼叫 beforeRouteEnter。
呼叫全域的 beforeResolve 守衛 (2.5 )。
導航被確認。
呼叫全域的 afterEach 鉤子。
觸發 DOM 更新。
呼叫 beforeRouteEnter 守衛中傳給 next 的回呼函數，建立好的元件實例會作為回呼函數的參數傳入。
更多程式相關知識，請造訪：程式設計入門！ ！
以上是深入淺析Vue-Router中的導航鉤子的詳細內容。更多資訊請關注PHP中文網其他相關文章！
