Vue路由守衛之組件內路由守衛

​        beforeRouteEnter,進入路由前。需要注意這里不能使用this,因為我們使用的是進入路由之前，那會組件還沒創建，得不到this這個屬性，所有我們只能使用過vm異步語句來讓節點上樹；

<script>
    export default {
        data(){
            return{
                num : 10
            }
        },
        beforeRouteEnter:(to,from,next)=>{
            next(vm=>{
                alert(vm.num)
            })
        },
​
    }
</script>

　　

        運行后可以看到，在使用beforeRouteEnter，使用的vm異步語句得到

       

beforeRouteLeave：離開路由之前可以被調用，可以訪問里面的this屬性！

<script>
    export default {
        data(){
            return{
                num : 10
            }
        },
        beforeRouteLeave (to, from, next) {
            if(confirm('確定離開嗎？') === true){
                next()
            }else{
                next('aa')
            }
        }
    }
</script>

　　

        運行后可以看到，使用beforeRouteLeave(離開路由之前)，系統會詢問是否要離開，點擊取消系統不會跳轉，點擊確定之后系統才會跳轉離開。所以我們可以在離開路由之前做一些事情；

為大家奉上導航守衛完整的解析流程

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

 

 

     下面為大家附上源碼地址 https://gitee.com/web94/vuezujianneiluyou

 

        如果覺得不錯請點點手指，關注下我們公眾號，我們會長期為您分享前端知識點；