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

向右看齐 2021-07-25 00:18 363阅读 0赞

**目录**

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

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