路由導航守衛有幾種，如何實作

路由導航守衛有幾種，如何實作

一、全局路由守衛

所謂全局路由守衛，就是小區大門，整個小區就這一個大門，你想要進入其中任何一個房子，都需要經過這個大門的檢查

全局路由守衛有個兩個：一個是全局前置守衛，一個是全局後置守衛

router.beforeEach((to, from, next) => { console.log(to) => // 到哪個頁面去？ console.log(from) => // 從哪個頁面來？ next() => // 一個回調函數

}

router.afterEach（to，from） = {} next()：回調函數參數配置

next(false): 中斷目前的導航。如果浏覽器的 URL 改變了 (可能是使用者手動或者浏覽器後退按鈕)，那麼 URL 位址會重置到 from 路由對應的位址

next(’/’) 或者 next({ path: ‘/’ }): 跳轉到一個不同的位址。目前的導航被中斷，然後進行一個新的導航。你可以向 next 傳遞任意位置對象，且允許設定諸如 replace: true、name: ‘home’ 之類的選項以及任何用在 router-link 的 to prop 或 router.push 中的選項

二、元件路由守衛

// 跟 methods: {}等同級别書寫，元件路由守衛是寫在每個單獨的 vue 檔案裡面的路由守衛

beforeRouteEnter (to, from, next) {

// 注意，在路由進入之前，元件執行個體還未渲染，是以無法擷取 this 執行個體，隻能通過 vm 來通路元件執行個體

next(vm => {})

}

beforeRouteUpdate (to, from, next) {

// 同一頁面，重新整理不同資料時調用，

}

beforeRouteLeave (to, from, next) {

// 離開目前路由頁面時調用

}

三、路由獨享守衛

路由獨享守衛是在路由配置頁面單獨給路由配置的一個守衛

export default new VueRouter({ routes: [

{

path: ‘/’,

name: ‘home’, component: ‘Home’,

beforeEnter: (to, from, next) => {

// …

}

}

]

})