vue 列表根据路由改变，但路由改变后列表没有变化？

Question

js

menuList:{
A:{list:[1,2,3],name:'A set'},
B:{list:[4,5,6],name:'B set'}
}

 methods: {
        reloading: function(obj) {
            console.log(obj.name);
            this.articleType = obj.name;
            this.DyComp.model = obj.model;
            this.dataUriPosTitle = obj.name;
            this.$router.push({
                path:
                    "/sub/" +
                    this.$route.params.type +
                    "/" +
                    obj.Dtype +
                    "/" +
                    obj.dataUri
            });
        },
        arrObjFind: function(arr, key, value) {
            var x;
            arr.map(function(obj, index) {
                console.log(key, obj[key], value, "kv");
                if (obj[key] == value) {
                    x = obj;
                }
            });
            return x;
        },
        loadDefault: function() {
            console.log(this.$route.params.type, "loaddefault");
            var vm = this;
            var name = this.menuList[this.$route.params.type].name;
            var list = this.menuList[this.$route.params.type].list;
            var dataUri = list[0].dataUri;
            this.articleType = list[0].name;
            this.menuPos = 0;
            console.log(this.$route.params.type, list);
            this.DyComp.model = list[0].model;
            this.DyComp.data = { ...this.DyComp.data, dataUri };
            console.log(this.DyComp, "Dycomp");
        }
    },
    watch: {
        $route: function() {
            console.log("sub`s route changed");
            var vm = this;
            var dataUri = this.$route.params.dataUri;
            var Dtype = this.$route.params.Dtype;
            var articleTypeFresh = vm.arrObjFind(
                vm.menuList[vm.$route.params.type].list,
                "dataUri",
                vm.$route.params.dataUri
            );
            console.log(dataUri, Dtype, vm.DyComp.model, "dataUri");
            this.NowMenu = this.menuList[this.$route.params.type];
            if (dataUri) {
                console.log(dataUri, Dtype, "sub watch actived");

                vm.DyComp.model = vm.Dtypes[Dtype];
                vm.DyComp.data = { ...vm.DyComp.data, dataUri };
                if (articleTypeFresh) {
                    vm.articleType = articleTypeFresh.name;
                }
                console.warn(
                    vm.arrObjFind(
                        vm.menuList[vm.$route.params.type].list,
                        "dataUri",
                        vm.$route.params.dataUri
                    ),
                    vm.$route.params.dataUri,
                    vm.menuList[vm.$route.params.type].list,
                    "issssssssssssss"
                );
                console.log(vm.DyComp, "watch Dycomp");
            } else {
                console.warn("no dataUri");
                this.loadDefault();
            }
        }
    },

template

//预期
                <div class="subTitle">
                    {{menuList[$route.params.type].name}}
                </div>
                <ul>
                   
                    <li v-for="(item,index) in menuList[$route.params.type].list" :key="index">
                        <a @click="reloading(item)">
                        {{item.name}}
                        </a>
                    </li>
                   

                </ul>
//实际
<ul>
   <li v-for="(item,index) in menuList[$route.params.type].list" :key="index">
       <input type="radio" :name="menuList[$route.params.type].name" :value="index" :id="'R'+menuList[$route.params.type].name+index" v-model="menuPos">
       <label track-by="$index" :for="'R'+menuList[$route.params.type].name+index" @click="reloading(item)">
                            {{$route.params.type}}
                            {{item.name}}
       </label>
   </li>

</ul>

思路是，路由的type是A时，加载A的列表[1,2,3],路由的type是B时，加载B的列表[4,5,6]。

router：
/pages/:type/:DataModel/:DataUri
点击列表项，会设置DataModel和DataUri。
预期是，由A到B，列表也会自动变化。

点击A（特色服务）
/pages/A
列表：[1,2,3]

上面的是预期，下面的是实际显示

点击1
/pages/A/m/1

点击B（关于我们）
/pages/B
列表：[1,5,6] (预期是4，5，6)

目前能发现的是，li中不使用label时似乎就可以，但是使用了label标签之后就不可以了。

Answer 1

可以根据以下两个问答解决问题，结论是:key最好在数据变化时发生变化。key如果相同的话，列表不会全刷新。

Vue+Element-UI出现bug，删除v-for列表中一项时数据对不上了

v-for="(item, index) in list"循环子组件，删除第n个组件后，其后的组件会更新，无法保持状态