两个请求，跳转到同一个组件，操作同一个数据源，如何做成选项卡的效果

Question

我现在有两个请求，点击链接，push到同一个vue文件，但是请求不同，操作的数据源相同，如何衍生出两个数据源来，即A链接，A选项卡，A数据源，B链接，B选项卡，B数据源

其中，A链接，A选项卡，A数据源，B链接，B选项卡，B数据源，操作的是同一个vue文件。

遇到得问题：现在点击链接，可以根据参数判断是否需要新增一个选项卡，但是打开两个选项卡，参数不同的话，两个选项卡的内容会同步，所以从业务上来看就是个bug，跪求高手帮忙解决，或者提供一个思路。

Answer 1

点击相应的Tab，操作相应Tab对象里面的数据就行了，对其他Tab不会有影响

[
    {
        tabName: 'Tab1',
        tabContent: ''
    },
    {
        tabName: 'Tab2',
        tabContent: ''
    }
]

Answer 2

根据你的这段描述，按我的理解，A、B选项卡貌似是用的同一个VUE文件，那么就可以抽离出一个公共组件(component)出来。每一个选项卡里面都加载这个公共组件，这样就不会有数据同步的问题了。如果还不行的话，在选项卡当中，给这个组件加一个属性key，值不一样就行，我觉得可以用时间戳作为key的值。
补充一下：我的理解，选项卡也是一个VUE文件，在里面import公共组件，然后在公共组件的标签上加上key。

Answer 3

A链接，A选项卡，A数据源所用的所有的东西都放在一个对象里面如AData{},然后B链接，B选项卡，B数据源全部放在BData{}里。A选项卡的所有值用this.AData.name(举个例子)，B选项卡同理。

export default {
data(){
    return{
        AData{
            name:'',
            grade:''
        },
        BData{
            name:'',
            grade:''
        }
    }
   }
}