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

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