vue2 beforeRouteEnter

beforeRouteEnter中修改data中数据页面为啥不会更新并且图中两个this和msg不一样

首先从执行时机来看
beforeRouteEnter>beforeCreate>created

this在这三者中的值
beforeRouteEnter
此时组件还没有被创建，所以不能通过this拿到当前的组件实例，页面显示this的值为 undefind 。

beforeCreated

beforeCreate中可以获取到this，但是此时实例未初始化只能获取到this对象内以$开头的键值，若访问data中的属性时，会返回 undefind 。

Created
Created中可以获取到this，并且可以获取到this中data的值

data里面的日志应该是在beforeRouteEnter之后运行的吧

this不同是作用域的问题，第一个this放到setTimeout里面了，你可以定义一个const me = this放在setTimeout方法上面,用me在setTimeout方法里面去执行相关的代码

不知道你这个问题是否已经解决, 如果还没有解决的话:

这篇博客: Vue复习（5）：Vue-路由相关(2)中的 1.beforeRouteEnter 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:
在渲染的组件对应的路由被确定之前调用
Person.vue组件中代码如下
```
<template>
    <div>Person
        {{$route.params.id}}
    </div>
</template>
<script>
export default {
   beforeRouteEnter(to,from,next){
       console.log(to)//要去的路径
       console.log(from)//上一个路径
       console.log(next)
   }
}
</script>
```
当我们点击完home后点击任何一个Person都没有反应，控制台打印了我们的三个参数，说明此时守卫被触发，我们无法跳转到Person路由上，解决方法还是调用next（）函数，释放守卫

以下回答来自chatgpt:

答案：

在vue2的beforeRouteEnter钩子函数中修改data中的数据后页面没有更新，而且出现了两个不一样的this和msg是因为在beforeRouteEnter钩子函数中this还没有被创建出来，所以无法修改它的data数据，可以改用beforeRouteUpdate钩子函数，或者将要修改的data数据放在vuex中进行管理，在路由跳转前保存和取出。

如果还想使用beforeRouteEnter钩子函数进行数据修改，可以使用回调函数或者Promise来实现等待组件创建完成后再进行数据修改，示例如下：

beforeRouteEnter(to, from, next) {
  next(vm => {
    vm.$data.msg = 'hello world';
  });
}

具体代码如下：

先将项目的轮询功能从created()挪到getDateLoop()中，并且将轮询的id存入了data中的polling，这样在离开页面(beforeRouteLeave钩子函数)时就可以清除轮询：

data() {
  return {
    polling: ''
  }
},
methods: {
  getDateLoop(timeout = 15000) { // timeout可以写死，也可以动态
    console.log('查询'); // 执行语句
    this.polling = setInterval(() => {
      console.log('查询'); // 轮询中，执行语句
    }, timeout)
  },
},
created() {
  this.getDateLoop();
},
beforeRouteLeave(to, from, next){  // 路由跳转前，清除轮询
    next();
    if (this.polling) {
      clearInterval(this.polling);
      this.polling = null;
    }
 },

接下来可以将要修改的data数据放入vuex中进行管理：

// store.js
export default new Vuex.Store({
  state: {
    msg: ''
  },
  mutations: {
    setMsg (state, msg) {
      state.msg = msg
    }
  },
  actions: {
  },
  modules: {
  }
})

// project.vue
beforeRouteEnter(to, from, next) {
  next(vm => {
    vm.$store.commit('setMsg', 'hello world');
  });
},

或者使用beforeRouteUpdate钩子函数：

beforeRouteUpdate(to, from, next) {
  this.msg = 'hello world';
  next();
},

如果需要在beforeRouteEnter钩子函数中修改数据，可以使用回调函数或者Promise来实现等待组件创建完成后再进行数据修改，示例如下：

beforeRouteEnter(to, from, next) {
  next(vm => {
    vm.$data.msg = 'hello world';
  });
},

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^