Vue 路由全局攔截是一種非常強大的技術,它能夠幫助我們在前端應用中對 URL 進行深入的控制。這個技術的本質就是在應用中設置路由鉤子,每當一個新的路由被激活時,路由鉤子就會被觸發,通過鉤子函數中的代碼,我們可以對路由進行各種操作,例如判斷用戶登錄狀態、修改頁面標題等等。
Vue 路由全局攔截可以通過下面的代碼來實現:
const router = new VueRouter({ routes // 定義路由 }) router.beforeEach((to, from, next) =>{ // 在這里實現路由全局攔截功能 })
在這段代碼中,我們定義了一個 VueRouter 實例,然后通過 beforeEach 方法來設置路由鉤子。這個方法接受三個參數,to 和 from 分別表示即將激活的路由和當前的路由,next 是一個函數,它會讓路由繼續執行。
在路由鉤子中,我們可以進行很多操作。例如,我們可以通過檢查用戶登錄狀態來防止未登錄用戶訪問某些頁面:
router.beforeEach((to, from, next) =>{ const loggedIn = localStorage.getItem('user') if (to.matched.some(record =>record.meta.requiresAuth) && !loggedIn) { next('/login') } else { next() } })
在這個例子中,我們設置了一個 meta 屬性 requiresAuth,用來表示訪問此路由需要用戶已經登錄。然后在路由鉤子中,我們通過檢查 localStorage 中是否存在 user 來判斷用戶是否已經登錄。如果用戶未登錄,則跳轉到登錄頁面。
除了判斷用戶登錄狀態,我們還可以在路由鉤子中修改頁面標題:
router.beforeEach((to, from, next) =>{ if (to.meta.title) { document.title = to.meta.title } next() })
在這個例子中,我們設置了一個 meta 屬性 title,用來表示當前路由對應的頁面標題。然后在路由鉤子中,我們通過修改 document.title 屬性來修改頁面標題。
除了上面的操作,我們還可以在路由鉤子中進行很多其他的操作,例如發送統計信息、顯示加載中動畫等等。總之,Vue 路由全局攔截是一個非常強大的技術,它可以幫助我們掌控應用的各種行為。