vue 使用$router.push(参数)跳转同一路由页面，参数不同，跳转页面数据均为最后一次传值数据

问题描述：项目中，使用$router.push(参数)跳转同一路由页面，打开多个tab，数据均为最后一次打开的数据；1、列表页面2、从1进入的编辑详情：3、从2进入的编辑详情：4、此时1的编辑详情内容也变成了2进入的编辑详情内容解决方案一：<template><router-view :key="key"></router-view></template&

嘿是我呀

1357人浏览 · 2023-10-23 15:39:27

嘿是我呀 · 2023-10-23 15:39:27 发布

问题描述：项目中，使用$router.push(参数)跳转同一路由页面，打开多个tab，数据均为最后一次打开的数据；

1、列表页面

在这里插入图片描述

2、从1进入的编辑详情：

在这里插入图片描述

3、从2进入的编辑详情：

4、此时1的编辑详情内容也变成了2进入的编辑详情内容

解决方案一：

<template>
  <router-view :key="key"></router-view>
</template>
<script>
export default {
  computed: {
    key() {
      return this.$route.path + Date.now()
    }
  }
}
</script>
<style>
</style>

解决方案二（监听路由）：

//解决进入不同row的详情，打开多个tab，数据均为最后一次打开的数据
watch: {
    $route(to, from) {
      if (to.query.id != from.query.id) {
        this.invoiceItem = to.query
        this.getInvoiceDetails();
      }
    },
}