关于vue组件复用后data数据如何独立？

Question

通过点击订单后的商品按钮跳转到对应订单所对应的页面

这是点击按钮后跳转的方法，将用户姓名和订单ID传到组件中

handleProduct(index, row) {
      this.$router.push({
        name: 'orderProduct',
        params: {
          orderId: row.orderId,
          custName: row.custName
        }
      });
    }

之后订单商品页面根据前一个页面传过来的订单ID查询出该订单所包含的商品信息
问题就在于，如果我同时打开多个不同订单的订单商品页面，改变其中一个页面的查询条件，另外一个页面的查询条件也会改变，这就证明了这两个页面的data是共用的。

网上查询过有说data要用函数return出去，我在项目中也是这样做的

现在唯一能想到的就是标签栏导致的问题？不知道有没有大佬知道具体是哪里出了问题。
这个项目的模板是来自https://github.com/lin-xin/vu...，里面就有bug和tag的实现代码

如果有需要哪部分的代码片段请留言，我会尽快更新的！

Answer 1

在订单商品页面写data，接收传递过来的值，这样其他页面的值发生改变后，订单商品页面的ID就不会发生变化了