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>

Logo

前往低代码交流专区

更多推荐