Vue.js 2中使用beforeRouteEnter钩子获取数据后无法赋值的问题

我明白你碰到的问题了——beforeRouteEnter这个路由钩子有个特殊点：它是在组件实例还没被创建的时候触发的，所以你在这个钩子里面直接用this根本拿不到当前组件的实例，自然没法把获取到的数据赋值给post。

不过别担心，Vue官方早就为这个场景准备了解决方案：利用beforeRouteEnter的第三个参数next的回调函数，它会在组件实例创建完成后执行，并且会把组件实例作为参数传递给你。

具体实现步骤 #

结合你的文章组件，修改后的代码大概是这样的：

在组件的script部分添加路由钩子逻辑：

export default {
  data() {
    return {
      post: {} // 先初始化post对象
    };
  },
  beforeRouteEnter(to, from, next) {
    // 替换成你实际获取文章数据的逻辑，比如axios请求
    // 假设你根据路由参数（比如文章ID）拉取数据
    const fetchPostData = async () => {
      try {
        // 示例请求，替换成你的真实接口
        const response = await fetch(`/api/posts/${to.params.postId}`);
        const postData = await response.json();
        
        // 通过next的回调，把数据赋值给组件实例的post属性
        next(vm => {
          vm.post = postData;
        });
      } catch (error) {
        console.error('获取文章数据失败:', error);
        // 错误处理：比如跳转到404页面
        next('/404');
      }
    };

    fetchPostData();
  }
};

额外补充：组件复用场景的处理 #

如果你的组件会被复用（比如从文章A跳转到文章B，路由参数变化但组件实例不销毁），还得加上beforeRouteUpdate钩子——这个钩子触发时组件实例已经存在，可以直接用this：

beforeRouteUpdate(to, from, next) {
  const fetchPostData = async () => {
    try {
      const response = await fetch(`/api/posts/${to.params.postId}`);
      const postData = await response.json();
      
      // 这里直接用this就能访问组件实例
      this.post = postData;
      next();
    } catch (error) {
      console.error('获取文章数据失败:', error);
      next('/404');
    }
  };

  fetchPostData();
}

原理说明 #

beforeRouteEnter的next回调是Vue特意设计的，用来绕过实例未创建的限制——这个回调会在组件的mounted钩子之前执行，此时组件实例已经完全初始化，你可以通过vm参数（也就是组件实例）自由修改data里的属性，比如你的post对象，这样模板里的v-html="post.title"等绑定就能正常渲染数据了。

内容的提问来源于stack exchange，提问作者Giacomo Ciampoli