Vue.js中使用vue-router跳转同组件不同参数组件不重载问题

vue-router 遇到路由跳转匹配到同一个组件时，默认会直接复用已存在的组件实例，不会执行组件销毁、重建流程。这意味着原本写在created、mounted这类只执行一次的生命周期钩子里的数据加载逻辑，在仅路由参数变化的场景下根本不会再次触发。
你之前给每个列表项加的:key="item.id"，仅作用于v-for遍历渲染列表节点的 diff 逻辑，和路由组件本身的实例复用机制完全无关，自然起不到任何效果。

• 监听路由变化触发数据加载（性能最优，推荐）
  不需要强制销毁重建组件，直接在目标组件内监听路由参数，参数变更时重新跑对应的数据加载逻辑就行。示例代码：

  watch: {
    // 根据自身路由结构，仅监听需要响应的动态参数即可
    '$route.params': {
      handler(newParams) {
        // 替换为你实际根据路由参数加载数据的业务逻辑
        this.loadDetailData(newParams.model, newParams.id)
      },
      immediate: true // 首次进入组件时也会执行，可兼容原有created的加载逻辑，避免代码重复
    }
  }
  

• 给router-view绑定动态key，强制组件重建
  如果不需要保留组件内的临时状态，可直接给全局或布局层的router-view绑定和路由关联的key，只要路由路径变化，key值就会更新，Vue会自动销毁旧组件、渲染全新组件实例，所有生命周期钩子会正常执行。示例代码：

  <!-- 替换原有位置的router-view -->
  <router-view :key="$route.fullPath" />
  

  该方案的缺点是每次路由跳转都会全量重建组件，相比watch方案性能损耗更高，适合对性能要求不高的快速开发场景。
• 用专属路由守卫拦截同组件更新
  vue-router 专门为同组件路由更新场景提供了beforeRouteUpdate组件内守卫，只有当前组件对应的路由发生参数变化时才会触发，精准度更高：

  beforeRouteUpdate(to, from, next) {
    // 检测到目标详情id变化时，重新拉取对应数据
    if (to.params.id !== from.params.id) {
      this.loadDetailData(to.params.model, to.params.id)
    }
    next()
  }
  

你现在的跳转路径格式为/admin/${item.data.data.model}/${item.data.data.id}，如果该类路径在路由配置中统一匹配的是同一个详情组件，跳转时就必然会触发上述的同组件复用问题。上述三个方案任选其一接入，就能解决路由变化但组件不更新的问题。

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