vue的路由守衛

1.前置路由

vue-router 提供的導航守衛主要用來通過跳轉或取消的方式守衛導航。言下之意就是當vue route方式改變時，就會觸發路由守衛進行回調一些相關的回調函數。

//前置守衛 //to: Route: 即將要進入的目標 路由對象 //from: Route: 當前導航正要離開的路由 //next: Function: 一定要調用該方法來 resolve 這個鉤子。 router.beforeEach((to, from, next) => {//通過beforeEach，可以將路跳轉前的一些路由信息繼續保存// 如：將當前路由信息保存到data中的path去this.path = this.$route.pathnext(); })activated(){//通過添加activated周期函數，可以將保存的路由繼續讀出//這樣用戶回退到上一頁，頁面還可以保存之前用戶瀏覽的狀態了this.$router.push(this.path) }

當然要保存信息，當然要確保路由對應的組件在路由跳轉時不會被銷毀，所以要把組件組件狀態緩存下來，這個可以通過keep-alive來實現

<keep-alive></keep-alive>

2.后置鉤子

你也可以注冊全局后置鉤子，然而和守衛不同的是，這些鉤子不會接受 next 函數也不會改變導航本身：

router.afterEach((to, from) => {// 路由跳轉后想干的事情 })

還有很多其他的守衛，這里就不一一列出了，詳細看頁面最下方的官方的路由守衛頁信息。

3.守衛的位置

守衛又分全局的, 單個路由獨享的, 或者組件級的，這個很簡單，只有確定守衛位置，就能知道守衛的作用域了。

全局

const router = new VueRouter({ ... }) //全局就是寫在外面 router.beforeEach((to, from, next) => {// ... })

路由獨享

const router = new VueRouter({routes: [{path: '/foo',component: Foo,//寫在routes里面的，就是該路由獨享beforeEnter: (to, from, next) => {// ...}}] })

組件內

const Foo = {template: `...`,//寫在組件里面的，就是該組件獨享beforeRouteEnter (to, from, next) {//...} }

4.完整的導航解析流程

這個是官方給出的導航解析流程，這里描述了守衛觸發的順序。

導航被觸發。

在失活的組件里調用 beforeRouteLeave 守衛。

調用全局的 beforeEach 守衛。

在重用的組件里調用 beforeRouteUpdate 守衛 (2.2+)。

在路由配置里調用 beforeEnter。

解析異步路由組件。

在被激活的組件里調用 beforeRouteEnter。

調用全局的 beforeResolve 守衛 (2.5+)。

導航被確認。

調用全局的 afterEach 鉤子。

觸發 DOM 更新。

調用 beforeRouteEnter 守衛中傳給 next 的回調函數，創建好的組件實例會作為回調函數的參數傳入。

5.詳細解釋

這里給出官方文檔的位置：https://router.vuejs.org/zh/guide/advanced/navigation-guards.html

總結

以上是生活随笔為你收集整理的vue的路由守卫的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。