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

最新推荐文章于 2024-09-02 15:45:53 发布

嘿是我呀

最新推荐文章于 2024-09-02 15:45:53 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_42998230/article/details/133991389

文章讲述了在项目中，使用$router.push跳转同一路由时，如何避免数据被其他打开的tab覆盖的问题。给出了两种解决方案：一是使用`key`属性确保每个视图实例独立，二是通过监听路由变化来更新特定数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述：项目中，使用$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();
      }
    },
}