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

问题描述:项目中,使用$router.push(参数)跳转同一路由页面,打开多个tab,数据均为最后一次打开的数据;
1、列表页面

vue 使用$router.push(参数)跳转同一路由页面,参数不同,跳转页面数据均为最后一次传值数据_第1张图片

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

vue 使用$router.push(参数)跳转同一路由页面,参数不同,跳转页面数据均为最后一次传值数据_第2张图片

3、从2进入的编辑详情:vue 使用$router.push(参数)跳转同一路由页面,参数不同,跳转页面数据均为最后一次传值数据_第3张图片
4、此时1的编辑详情内容也变成了2进入的编辑详情内容vue 使用$router.push(参数)跳转同一路由页面,参数不同,跳转页面数据均为最后一次传值数据_第4张图片
解决方案一:
<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();
      }
    },
}

你可能感兴趣的:(vue.js,javascript,前端)