本文主要介紹了詳解Vue路由鉤子及應用場景（小結），小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。
F. 路由鉤子語法
在vue-router的官方文件中, 將路由鉤子翻譯為導航守衛, 下面是文檔中的內容摘要, 大家也可以透過傳送門前往官網閱讀詳細內容
路由鉤子
路由鉤子主要是給用戶在路由發生變化時進行一些特殊的處理而定義的，靠。 。好拗口啊。
總體來講vue裡面提供了三大類鉤子
#1、全域鉤子
2、某個路由獨享的鉤子
3、元件內鉤子
三種路由鉤子中都涉及到了三個參數，這裡直接上官方介紹吧
to: Route: 即將要進入的目標路由物件
from: Route: 目前導覽正要離開的路由
next: Function: 一定要呼叫該方法來resolve 這個鉤子。執行效果依賴 next 方法的呼叫參數。
next(): 進行管道中的下一個鉤子。如果全部鉤子執行完了，則導航的狀態就是 confirmed （確認的）。
next(false): 中斷目前的導航。如果瀏覽器的 URL 改變了（可能是使用者手動或瀏覽器後退按鈕），那麼 URL 位址會重設到 from 路由對應的位址。
next(‘/') 或 next({ path: ‘/' }): 跳到一個不同的位址。目前的導航被中斷，然後進行一個新的導航。
(一).全域守衛(全域路由鉤子)
你可以使用router.beforeEach 註冊一個全域前置守衛：
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
next()
})每個守衛方法接受三個參數:
to: Route: 即將要進入的目標路由物件
from: Route: 目前導覽正要離開的路由
next: Function: 一定要呼叫該方法來resolve 這個鉤子。執行效果依賴next 方法的呼叫參數
注意:使用全域路由鉤子, 一定要呼叫next()!!!
##(二).路由獨享的守衛(路由內鉤子)你可以在路由配置上直接定義beforeEnter 守衛：const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})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`
}
}beforeRouteLeave (to, from, next) {
window.clearInterval(this.timer) //清楚定时器
next()
} beforeRouteLeave (to, from, next) {
//判断是否弹出框的状态和保存信息与否
if (this.dialogVisibility === true) {
this.dialogVisibility = false //关闭弹出框
next(false) //回到当前页面, 阻止页面跳转
}else if(this.saveMessage === false) {
alert('请保存信息后退出!') //弹出警告
next(false) //回到当前页面, 阻止页面跳转
}else {
next() //否则允许跳转
}
} beforeRouteLeave (to, from, next) {
localStorage.setItem(name, content); //保存到localStorage中
next()
}以上是Vue路由鉤子及應用場景小結分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！
