vue中實現頁面的攔截、跳轉、判斷

1，全局前置守衛：beforeEach

const router =new Router（{……}）;
router.beforeEach((to, from, next) => {
 
});

2，全局后置守衛:afterEach

3，路由獨享的鈎子函數（路由守衛）:beforeEnter

在配置路由的時候直接定義beforeEnter守衛，跳轉到這個路由時候才會執行

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

 

4 組件內的鈎子函數（組件守衛）
直接寫在單個vue文件中的中，寫的位置跟mounted之類的鈎子函數同級別。參數都是to、from、next

4.1 beforeRouteEnter
作用：在渲染該組件對應的路由被confirm前調用，

注意：這時候該組件的this不能使用，因為組件實例還沒被創建。

 

4.2 beforeRouteUpdate
作用：當前路由改變，但是該組件被復用時候調用，舉例來說，對於三級導航，一個帶有動態參數的路徑/index/id，在/index/1和 /index/2之間跳轉的時候，由於會渲染同樣的index組件，因此該組件會被復用，而這個鈎子會就再復用的時候調用。

注意：可以使用組件的實力this

4.3 beforeRouteLeave
作用：導航離開該組件對應的路由時調用

5，單個vue文件中，設置監聽

 watch: {
        $route: {
            handler: function(val, oldVal){
                if(oldVal.path== "/map"){
                // this.$refs.tclb.closeDrawer()
                this.drawer=false;
                }
                if(val.path== "/map"){
                    document.getElementById("tclb_container").style.display="block";
                     this.getParams();
                //this.drawer=false;
                }
                
            },
            
            // 深度觀察監聽
            // deep: true
        },
       // "$route":"getPath" // 監聽事件
  },