导航守卫之this的指向

当我们想要切换导航地址，改变这个组件中定义好的值时，就需要用到导航守卫和this。

例子：在跳转到某个页面时，我们要给这个页面中的某个模块做显隐的效果。

1.首先在此页面使用beforeRouteEnter这个钩子进行路由的获取：

beforeRouteEnter: (to, from, next) => {
    console.log(to,from,next)
}

2.进行条件的操作：

beforeRouteEnter: (to, from, next) => {
        if(from.path === '/winRate') { // 跳转到这个界面
            this.dataShow = true // 显示
        } else {
            this.dataShow = false // 隐藏
        }
}

3.在这个钩子函数中添加next()函数：

beforeRouteEnter: (to, from, next) => {
        if(from.path === '/winRate') { // 跳转到这个界面
            this.dataShow = true // 显示
        } else {
            this.dataShow = false // 隐藏
        }
        next()
    }

这时候你会发现this获取的和mounted中的this不一样。

原因就是beforeRouteEnter函数是在mounted()钩子函数之前执行的，而beforeRouteEnter中的next()函数是在mounted()之后执行的，所以正确的写法就是在next()中进行this的获取。代码如下：

附：导航守卫函数和vue生命周期函数的执行顺序