Vue-router進階：導航守衛

全局前置守衛

使用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 的回調函數。**