Vue-router跳转同路由不同参数时URL变更但组件不重新渲染问题求解

问题根因 #

Vue Router 默认会复用匹配到的相同组件实例，当仅路由参数发生变化、组件本身没有切换时，不会重新触发组件的初始化生命周期（created/mounted等），因此页面不会自动刷新。

可选解决方案 #

方案1：监听路由参数变化（推荐，性能最优） #

在PageItem组件内监听$route.params的变更，参数更新时重新拉取页面数据即可：

export default {
  watch: {
    '$route.params.itemId'(newId) {
      // 调用页面初始化数据的方法，传入新的itemId
      this.initPageData(newId)
    }
  },
  created() {
    // 首次进入页面时也需要初始化数据
    this.initPageData(this.$route.params.itemId)
  },
  methods: {
    async initPageData(itemId) {
      // 你的业务请求逻辑
    }
  }
}

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

和监听逻辑类似，是路由场景下的专用API，逻辑更聚合：

export default {
  async beforeRouteUpdate(to, from, next) {
    // 从新的路由参数中取itemId拉取数据
    await this.initPageData(to.params.itemId)
    next()
  },
  created() {
    this.initPageData(this.$route.params.itemId)
  },
  methods: {
    async initPageData(itemId) {
      // 你的业务请求逻辑
    }
  }
}

方案3：给router-view添加唯一key（强制重建组件） #

如果不想修改PageItem的内部逻辑，可以在父组件PageWrapper的router-view标签上绑定唯一key，路由参数变化时会强制销毁重建组件，自动触发完整的生命周期：

<!-- PageWrapper 组件模板 -->
<router-view :key="$route.fullPath" />

注意：该方案会导致组件每次路由参数变化都完整销毁重建，若组件复杂度较高会产生额外性能开销，适合轻量页面使用。

额外注意点 #

你当前贴的路由配置里，PageItem的path写的是/item/:itemId/:view?，开头带斜杠会被识别为根路径，最终匹配的路由是/item/xxx而非/page/item/xxx，如果实际运行中路径不符合预期可以检查这里，把开头的斜杠去掉即可：

path: 'item/:itemId/:view?', // 去掉开头的/，会自动拼接父路由的/page前缀

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