Vue 路由 導航守衛(全局守衛、組件內守衛、路由獨享守衛)

一.全局守衛

1. router.beforeEach((to,from,next)=>{})

2. 回調函數中的參數，to：進入到哪個路由去，from：從哪個路由離開，next：函數，決定是否展示你要看到的路由頁面。

3. 如下例：main.js中設置全局守衛

在main.js中，有一個路由實例化對象router。在main.js中設置守衛已是全局守衛。如下，判斷to.path當前將要進入的路徑是否爲登錄或註冊，如果是就執行next()，展示當前界面。如果不是，就彈出alert，然後移至登錄界面。這樣就可實現，用戶在未登錄狀態下，展示的一直是登錄界面。

router.beforeEach((to,from,next)=>{
  if(to.path == '/login' || to.path == '/register'){
    next();
  }else{
    alert('您還沒有登錄，請先登錄');
    next('/login');
  }
})

4. 全局後置鉤子router.afterEach((to,from)=>{})

• 只有兩個參數，to：進入到哪個路由去，from：從哪個路由離。
• 如下，每次切換路由時，都會彈出alert，點擊確定後，展示當前頁面。

二.組件內的守衛

1. 到達這個組件時，beforeRouteEnter:(to,from,next)=>{}

• 在Admin.vue文件中，點擊轉到admin路由時，執行beforeRouteEnter函數
• to，from參數與上面使用方法一致。next回調函數略有不同。
• 如下例，data 組件內守衛有特殊情況，如果我們直接以
  beforeRouteEnter:(to,from,next)=>{ alert("hello" + this.name);}進行訪問admin頁面，會發現alert輸出hello undefined。這是因爲，現在訪問不到我們的data屬性，執行順序是不一致，這與的聲明週期有關。在執行完之前，data數據還未渲染。所以這裏，next()會給一個對應的回調，幫助完成。

<script>
export default {
    data(){
        return{
            name:"Arya"
        }
    },
    beforeRouteEnter:(to,from,next)=>{
        next(vm=>{
            alert("hello" + vm.name);
        })
    }
}
</script>

2. 離開這個組件時，beforeRouteLeave:(to,from,next)=>{}

點擊其他組件時，判斷是否確認離開。確認執行next()；取消執行next(false)，留在當前頁面。

beforeRouteLeave:(to,from,next)=>{
        if(confirm("確定離開此頁面嗎？") == true){
            next();
        }else{
            next(false);
        }
    }

三.路由獨享的守衛

1. beforeEnter:(to,from,next)=>{}，用法與全局守衛一致。只是，將其寫進其中一個路由對象中，只在這個路由下起作用。

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})