vue工程的router钩子函数全解（实现页面的拦截、跳转、判断）

目录

一、全局导航钩子函数（全局守卫）

1.1 全局前置守卫：beforeEach

1.2 全局后置守卫:afterEach

二、路由独享的钩子函数（路由守卫）:beforeEnter

三、组件内的钩子函数（组件守卫）

3.1 beforeRouteEnter

3.2 beforeRouteUpdate

3.3 beforeRouteLeave

四、路由监听watch

---

vue工程的router很强大，其强大的的钩子函数更流弊，可以实现很多页面的拦截、跳转等功能

一、全局导航钩子函数（全局守卫）

1.1 全局前置守卫：beforeEach

作用：全局的before钩子函数，在每次每个路由改变的时候都会执行

常用场景：需要登录后再跳转

参数：

• to:route路由对象，即将要进入的目标。头对象下面的属性有path params query hash fullPath matched name meta
• from：route路由对象，要离开的路由。
• next：next(),函数，调用方法：next()或者next({path:'/home'});这个函数必须调用。

使用流程：

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

});

1.2 全局后置守卫:afterEach

作用：页面加载之后执行。没有next方法，不能改变导航，代表已经确定好了导航以后怎么去执行，附带执行一个函数。

二、路由独享的钩子函数（路由守卫）:beforeEnter

在配置路由的时候直接定义beforeEnter守卫，跳转到这个路由时候才会执行

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

 

三、组件内的钩子函数（组件守卫）

直接写在单个vue文件中的中，写的位置跟mounted之类的钩子函数同级别。参数都是to、from、next

3.1 beforeRouteEnter

作用：在渲染该组件对应的路由被confirm前调用，

注意：这时候该组件的this不能使用，因为组件实例还没被创建。

 

3.2 beforeRouteUpdate

作用：当前路由改变，但是该组件被复用时候调用，举例来说，对于三级导航，一个带有动态参数的路径/index/id，在/index/1和 /index/2之间跳转的时候，由于会渲染同样的index组件，因此该组件会被复用，而这个钩子会就再复用的时候调用。

注意：可以使用组件的实力this

3.3 beforeRouteLeave

作用：导航离开该组件对应的路由时调用

注意：可以使用实例化this

四、路由监听watch

单个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" // 监听事件
  },