導航守衛有：1、全域前置守衛「beforeEach」；2、全域解析守衛「beforeResolve」；3、路由獨享的守衛「beforeEnter」；4、元件內的守衛「beforeRouteEnter」、 「beforeRouteLeave」。
本教學操作環境：windows7系統、vue2.9.6版，DELL G3電腦。
vue-router 提供的導航守衛主要用來透過跳轉或取消的方式守衛導航。有多種機會植入路由導航過程中：全局的, 單一路由獨享的, 或組件級的。
記住參數或查詢的改變並不會觸發進入/離開的導航守衛。你可以透過觀察 $route 物件來應付這些變化，或使用 beforeRouteUpdate 的元件內守衛。
全域前置守衛
你可以使用router.beforeEach 註冊一個全域前置守衛：
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
})登入後複製
當一個導航觸發時，全域前置守衛按照創建順序調用。守衛是非同步解析執行，此時導航在所有守衛 resolve 完成之前一直處於 等待中。
每個守衛方法接收三個參數：
確保 next 函數在任何給定的導航守衛中都被嚴格地呼叫一次。它可以出現多於一次，但是只能在所有的邏輯路徑都不重疊的情況下，否則鉤子永遠不會被解析或報錯。這裡有一個在使用者未能驗證身分時重定向到/login 的範例：
// BAD
router.beforeEach((to, from, next) => {
if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
// 如果用户未能验证身份，则 `next` 会被调用两次
next()
})
// GOOD
router.beforeEach((to, from, next) => {
if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
else next()
})登入後複製
全域解析守衛
2.5.0 新增
在2.5.0 你可以用router.beforeResolve 註冊一個全域守衛。這和 router.beforeEach 類似，差異是在導航被確認之前，同時在所有元件內守衛和非同步路由元件被解析之後，解析守衛就被呼叫。
路由獨享的守衛
你可以在路由配置上直接定義beforeEnter 守衛：
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})登入後複製
這些守衛與全域前守衛的方法參數是一樣的。
元件內的守衛
##最後，你可以在路由元件內直接定義以下路由導航守衛：
##beforeRouteEnter const 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`
}
}登入後複製
不過，你可以透過傳一個回呼給 next來存取元件實例。在導航被確認的時候執行回調，並且把元件實例當作回調方法的參數。
beforeRouteEnter (to, from, next) {
next(vm => {
// 通过 `vm` 访问组件实例
})
}登入後複製
注意 beforeRouteEnter 是支援給 next 傳遞回呼的唯一守衛。對於 beforeRouteUpdate 和 beforeRouteLeave 來說，this 已經可用了，所以不支援傳遞回調，因為沒有必要了。
beforeRouteUpdate (to, from, next) {
// just use `this`
this.name = to.params.name
next()
}登入後複製
這個離開守衛通常用來禁止使用者在還未保存修改前突然離開。該導航可以透過 next(false) 來取消。
beforeRouteLeave (to, from, next) {
const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
if (answer) {
next()
} else {
next(false)
}
}登入後複製
完整的導航解析流程
導航被觸發。 -
【相關推薦：《vue.js教學》】
以上是vue的導航守衛都有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！
