Vue-router進階：導航守衛

tommego 發布于2019-08-23 15:20 / 2336人閱讀

摘要：全局前置守衛使用注冊一個全局前置守衛。守衛是異步解析執行，此時導航在所有守衛完之前一直處于等待中。中斷當前的導航。不過可以通過傳一個回調函數來訪問組建實例。注意是支持傳遞回調的唯一守衛。用創建好的實例調用守衛中傳給的回調函數。

全局前置守衛

使用router.beforeEach注冊一個全局前置守衛。

const router = new VueRouter({...})
router.beforeEach((to,from,next)=>{
    //...
})

當一個導航觸發時，全局前置守衛按照創建順序調用。守衛是異步解析執行，此時導航在所有守衛resolve完之前一直處于等待中。
每個守衛方法接收三個參數：

*to:Route即將要進入的目標路由對象。
*from:Route當前導航正要離開的路由。
*next:Function一定要調用該方法來resolve這個鉤子。執行效果依賴next方法的調用參數。
    next():進行管道中的下一個鉤子。如果全部鉤子執行完了，則導航的狀態就是confirmed(確認的)。
    next(false):中斷當前的導航。如果瀏覽器的URL改變了（可能是用戶手動或者瀏覽器后退按鈕），那么URL地址會重置到from路由對應的地址。
    next("/")或者({path:"/"})：跳轉到一個不同的地址。當前的導航被中斷，然后進行一個新的導航。你可以向next傳遞任意位置對象，且允許設置諸如replace:true、name:"home"之類的選項以及任何用在router-link的to prop或router.push中的選項。
    next(error):如果傳入next的參數是一個Error實例，則導航會被終止且該錯誤會被傳遞給router.onError()注冊過的回調。

確保要調用next方法，否則鉤子就不會被resolved。

全局解析首位

2.5.0新增：你可以用router.beforeResolve注冊一個全局守衛。這和router.beforeEach類似，區別是在導航被確認之前，同時在所有組件內守衛和異步路由組件被解析之后，解析守衛就被調用。

全局后置鉤子

和守衛不同的是，這些鉤子不會接受 next 函數也不會改變導航本。

router.afterEach((to,from)=>{
    //...
})

路由獨享的守衛

你可以在路由配置上直接定義beforeEnter守衛：

const router = new VueRouter({
    routes:[
        path:"/foo",
        component:Foo,
        beforeEnter:(to,from,next)=>{
            //...
        }
    ]
})
//這些守衛與全局前置守衛的方法參數是一樣的。

組建內的守衛

最后，可以在路由組件內直接定義以下路由導航守衛：

*beforeRouterEnter
*beforeRouterUpdate
*beforeRouterLeave

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
    }
}

beforeRouteEnter守衛不能訪問this，因為守衛在導航確認前被調用，因此即將登場的新組件還沒被創建。不過可以通過傳一個回調函數next來訪問組建實例。在導航被確認的時候執行回調，并且把組件實例作為回調方法的參數。

beforeRouteEnter(to,from,next){
    next(vm=>{
        //通過vm訪問組件實例。
    })
}

注意beforeRouteEnter是支持next傳遞回調的唯一守衛。對于beforeRouteEnter和beforeRouteLeave來說，this已經可用了，所以不支持傳遞回調，因為沒有必要了。

beforeRouteUpdate(to,from,next){
    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)
  }
}

完整的導航解析流程

1.導航被觸發。
2.在失活的組件里調用離開守衛。
3.調用全局的 beforeEach 守衛。
4.在重用的組件里調用 beforeRouteUpdate 守衛 (2.2+)。
5.在路由配置里調用 beforeEnter。
6.解析異步路由組件。
7.在被激活的組件里調用 beforeRouteEnter。
8.調用全局的 beforeResolve 守衛 (2.5+)。
9.導航被確認。
10.調用全局的 afterEach 鉤子。
11.觸發 DOM 更新。
12.用創建好的實例調用 beforeRouteEnter 守衛中傳給 next 的回調函數。**

GPU云服務器云服務器 vue-router 進階技巧 -進階進階

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101901.html

vue 路由進階

摘要：接收路由的路由傳參數的三種方式布爾模式表明將作為傳遞到匹配的組件中。元信息可在路由對象中配置屬性，是一個對象。路由可向路由匹配的組件傳遞參數，不同情況向組件傳遞不同的參數，從而實現組件的復用。路由向組件傳遞參數和路由匹配的組件可以在組件中使用 $route 獲取路由上的參數：傳參方式 :、params和query :在路徑傳遞參數 { path: /argu/:id/...

張憲坤 2019-08-23 18:09 評論0 收藏0
一篇搞定vue-Router導航守衛

摘要：如果我們不掉用守衛中的，迭代器的肯定并不會執行，守衛的迭代就停止了，守衛堵塞并不會執行完畢，也就不會由后面的更細路由操作了。 vue-router導航守衛在本期文章中，我將為大家梳理弄明白以下幾個事情， 1:導航守衛的執行順序是怎么樣的？ 2:導航守衛中的next的用處？ 3:為什么afterEach守衛沒有next？ 4:beforeEach是否可以疊加？ 5:路由跳轉經歷了哪幾部...

不知名網友 2019-08-23 12:12 評論0 收藏0
JS每日一題：Vue-router有哪些鉤子？使用場景？

摘要：問有哪些鉤子使用場景的實現可以點這里前面我們用大白話講過什么是鉤子，這里在重復一下，就是在什么什么之前什么什么之后英文叫專業點叫生命周期，裝逼點可以叫守衛中也存在鉤子的概念分為三步記憶全局守衛路由獨享守衛組件獨享守衛全局守衛很好理解，全 20190218問 Vue-router有哪些鉤子？使用場景？ router的實現可以點這里前面我們用大白話講過什么是鉤子，這里在重復一下，就是在...

張金寶 2019-08-23 15:18 評論0 收藏0
VueRouter進階（1）-導航守衛

摘要：簡介主要用來通過跳轉或取消的方式守衛導航。判斷必要操作是否進行沒進行的話中斷跳轉。進行管道中的下一個鉤子。如果全部鉤子執行完了，則導航的狀態就是確認的。中斷當前的導航。如果傳入的參數是一個實例，則導航會被終止且該錯誤會被傳遞給注冊過的回調。簡介主要用來通過跳轉或取消的方式守衛導航。例如判斷登錄信息：沒登錄全部跳到登錄頁。判斷必要操作是否進行沒進行的話中斷跳轉。分為三大類：全局守衛...

renweihub 2019-08-21 18:22 評論0 收藏0
vue-router 一些容易被忽略的知識點

摘要：調用全局的守衛。在被激活的組件里調用。用創建好的實例調用守衛中傳給的回調函數。本文適用于對 Vue.js 和 vue-router 有一定程度了解的開發者除特殊說明，vue-router 版本為 3.0.2 正文路由 class 匹配路由匹配后會給該標簽添加 class 屬性值 .router-link-active，該功能在嵌套路由中十分方便 class 的實際屬性值可以通...

chunquedong 2019-08-23 14:58 評論0 收藏0