Vue同路由不同参数帖子页来回切换时无法重复触发alert如何解决

问题根因 #

你的页面复用了同一个PagePost组件，且项目路由配置了<keep-alive>组件缓存，仅路由参数id变化时不会销毁重建原有组件实例，因此data()、mounted()这类仅实例初始化阶段执行的生命周期函数只会运行一次。

解决方案（按适配优先级排序） #

方案1：使用activated生命周期钩子（最适配缓存场景，推荐）

被<keep-alive>缓存的组件每次被激活渲染时都会触发activated钩子，正好匹配你每次进入帖子页都执行逻辑的需求，代码修改如下：

export default {
  name: 'PagePost',
  mounted() {
    // 首次加载执行逻辑
    this.loadPostData()
  },
  activated() {
    // 每次进入缓存的该组件都会触发执行
    this.loadPostData()
  },
  methods: {
    loadPostData() {
      // 把alert、加载帖子内容/评论的逻辑都放到该方法中统一调用
      alert(1)
      // 后续接口请求等业务逻辑写在此处
    }
  }
  ...
}

方案2：监听路由参数变化

如果不想依赖缓存钩子，也可以直接监听路由的id参数变化，只要参数更新就触发逻辑：

export default {
  name: 'PagePost',
  watch: {
    '$route.query.id': {
      immediate: true, // 首次加载也自动触发，可省略mounted中的重复调用
      handler() {
        this.loadPostData()
      }
    }
  },
  methods: {
    loadPostData() {
      alert(1)
      // 加载帖子、评论等业务逻辑
    }
  }
  ...
}

方案3：给路由组件加唯一key（强制重建实例）

如果不需要保留帖子页的缓存效果，可以直接在路由出口router-view上绑定带id的key，每次id变化就会销毁旧组件、重新创建新实例，mounted自然会每次执行：

<!-- 路由出口所在的父组件模板部分 -->
<router-view :key="$route.fullPath" />

该方案无需修改PagePost组件代码，但会失去组件缓存的性能优势，适合帖子页复杂度不高的场景。

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