Vue-router進階：導航守衛(wèi)

tommego 發(fā)布于2019-08-23 15:20 / 2358人閱讀

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

全局前置守衛(wèi)

使用router.beforeEach注冊一個全局前置守衛(wèi)。

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

當一個導航觸發(fā)時，全局前置守衛(wèi)按照創(chuàng)建順序調(diào)用。守衛(wèi)是異步解析執(zhí)行，此時導航在所有守衛(wèi)resolve完之前一直處于等待中。
每個守衛(wèi)方法接收三個參數(shù)：

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

確保要調(diào)用next方法，否則鉤子就不會被resolved。

全局解析首位

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

全局后置鉤子

和守衛(wèi)不同的是，這些鉤子不會接受 next 函數(shù)也不會改變導航本。

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

路由獨享的守衛(wèi)

你可以在路由配置上直接定義beforeEnter守衛(wèi)：

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

組建內(nèi)的守衛(wèi)

最后，可以在路由組件內(nèi)直接定義以下路由導航守衛(wèi)：

*beforeRouterEnter
*beforeRouterUpdate
*beforeRouterLeave

const Foo = {
    template:`...`,
    beforeRouteEnter(to,from,next){
        //在渲染組件的對應路由被confirm前調(diào)用。
        //不能獲取組件實例this
        //因為當守衛(wèi)執(zhí)行前，組件實例還沒被創(chuàng)建。
    },
    beforeRouteUpdate(to,from,next){
        //在當前路由改變，但是該組件被復用時調(diào)用。
        //舉例來說，對于一個帶有動態(tài)參數(shù)路徑/foo/:id，在/foo/1和/foo/2之間跳轉的時候。
        //由于會渲染同樣的Foo組件，因此組件實例會被復用。而這個鉤子就會在這個情況下被調(diào)用。
        //可以訪問組件實例this
    },
    beforeRouteLeave(to,from,next){
        //導航離開該組件的對應路由時調(diào)用。
        //可以訪問組件實例this
    }
}

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

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

注意beforeRouteEnter是支持next傳遞回調(diào)的唯一守衛(wèi)。對于beforeRouteEnter和beforeRouteLeave來說，this已經(jīng)可用了，所以不支持傳遞回調(diào)，因為沒有必要了。

beforeRouteUpdate(to,from,next){
    this.name = to.params.name;
    next();
}

這個離開守衛(wèi)通常用來禁止用戶在還未保存修改前突然離開。該導航可以通過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.導航被觸發(fā)。
2.在失活的組件里調(diào)用離開守衛(wèi)。
3.調(diào)用全局的 beforeEach 守衛(wèi)。
4.在重用的組件里調(diào)用 beforeRouteUpdate 守衛(wèi) (2.2+)。
5.在路由配置里調(diào)用 beforeEnter。
6.解析異步路由組件。
7.在被激活的組件里調(diào)用 beforeRouteEnter。
8.調(diào)用全局的 beforeResolve 守衛(wèi) (2.5+)。
9.導航被確認。
10.調(diào)用全局的 afterEach 鉤子。
11.觸發(fā) DOM 更新。
12.用創(chuàng)建好的實例調(diào)用 beforeRouteEnter 守衛(wèi)中傳給 next 的回調(diào)函數(shù)。**

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

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

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

vue 路由進階

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

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

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

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

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

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

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

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

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

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