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

//預(yù)期
                <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
點擊列表項，會設(shè)置DataModel和DataUri。
預(yù)期是，由A到B，列表也會自動變化。

點擊A（特色服務(wù)）
/pages/A
列表：[1,2,3]

上面的是預(yù)期，下面的是實際顯示

點擊1
/pages/A/m/1

點擊B（關(guān)于我們）
/pages/B
列表：[1,5,6] (預(yù)期是4，5，6)

目前能發(fā)現(xiàn)的是，li中不使用label時似乎就可以，但是使用了label標(biāo)簽之后就不可以了。