Vue项目重定向至同一组件时beforeMount钩子未触发问题

这是Vue路由优化带来的典型场景！当你在两个复用同一组件的路由（比如你的post/new和post/edit/:id都用PostForm）之间跳转时，Vue为了提升性能，会复用已有的组件实例，而不是重新创建新实例。这就导致像beforeMount、created这类只在组件实例初始化阶段触发的生命周期钩子，不会再次执行。

针对你的场景，这里有几个实用的解决方案：

方案1：监听路由变化（最常用） #

在PostForm组件里通过watch监听$route的变化，把原本放在beforeMount里的逻辑移到监听回调中，同时保留beforeMount里的初始执行逻辑：

export default {
  // ...其他配置
  beforeMount() {
    // 第一次进入组件时执行初始化逻辑
    this.initFormData();
  },
  watch: {
    $route(to, from) {
      // 路由跳转时重新执行初始化逻辑（比如根据新的id拉取编辑数据）
      this.initFormData();
    }
  },
  methods: {
    initFormData() {
      // 这里写你原本在beforeMount里的代码，比如判断是新建还是编辑，请求数据等
      const postId = this.$route.params.id;
      if (postId) {
        // 拉取编辑的帖子数据
        this.$api.getPost(postId).then(res => {
          this.post = res.data;
        });
      } else {
        // 初始化新建表单
        this.post = { title: '', content: '' };
      }
    }
  }
}

方案2：给RouterView添加唯一Key #

通过给<router-view>绑定key为$route.fullPath，强制Vue每次路由变化都销毁重建组件实例，这样beforeMount就会正常触发了。

修改你的路由配置中home组件的render函数：

component: {
  render(c) {
    return c('router-view', { 
      props: { 
        key: this.$route.fullPath 
      } 
    })
  }
}

⚠️ 注意：这个方法会带来组件销毁重建的性能开销，如果PostForm是比较复杂的组件，不推荐优先使用。

方案3：使用组件内路由守卫beforeRouteUpdate #

Vue提供了beforeRouteUpdate这个组件内的路由守卫，专门用于处理同组件路由更新的场景，逻辑更贴合路由跳转的上下文：

export default {
  // ...其他配置
  beforeMount() {
    this.initFormData();
  },
  beforeRouteUpdate(to, from, next) {
    // 路由更新时执行逻辑
    this.initFormData();
    // 必须调用next()才能让路由继续跳转
    next();
  },
  methods: {
    initFormData() {
      // 你的初始化逻辑
    }
  }
}

如果你的逻辑主要和路由变化强相关，这个方案会比watch更清晰。

内容的提问来源于stack exchange，提问作者Andria Toria