vue 组件多开，数据被覆盖问题排查及解决方案

Y、seventeen

已于 2022-07-27 15:24:22 修改

阅读量3.2k

点赞数 1

分类专栏： vue 文章标签：前端 javascript 开发语言

于 2022-06-21 10:46:49 首次发布

本文链接：https://blog.csdn.net/weixin_43303420/article/details/125386188

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文探讨了在Vue Router中使用动态路由时，详情页面数据被新开页面覆盖的原因。问题在于相同的组件实例被复用，导致生命周期钩子不触发。解决方法包括监听$route.params变化或为<router-view>添加key属性来确保每个详情页面拥有独立的数据上下文。

摘要由CSDN通过智能技术生成

vue-route

详情页面多开时，前面的页面数据被新开的页面数据覆盖了。

详情页面的路由，使用动态路由匹配。

{
    path: "/drugReturnManage/detail/:prescriptionId",
    name: "DrugReturnManageDetail",
    component: () => import("@/views/drug_return_manage/Detail.vue"),
    meta: {
      title: "发药详情",
      icon: "audit",
      requiresAuth: true,
      single: false,
    },
  },

响应路由参数的变化

原因：

当定义像 :prescriptionId 这样的参数时，两个路由

/drugReturnManage/detail/271805806045958144

和

/drugReturnManage/detail/271765171662360576，两者会匹配完全相同的 URL。

相同的组件实例将被重复使用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。因此，这也意味着组件的生命周期钩子不会被调用。

要对同一个组件中参数的变化做出响应的话，有两个方法：

方案1:
你可以简单地 watch $route 对象上的任意属性，在这个场景中，就是 $route.params ：

const User = {
  template: '...',
  created() {
    this.$watch(
      () => this.$route.params,
      (toParams, previousParams) => {
        // 对路由变化做出响应...
      }
    )
  },
}

方案2:
为 router-view 增加一个 key
<router-view :key="$route.fullPath"></router-view>