vue動(dòng)態(tài)路由如何根據(jù):id選擇組件渲染

動(dòng)態(tài)組件介紹

<template>
         <router-link :to="{path,query:{id}}"></router-link>
         <component v-bind:is="currentView">
          <!-- 組件在 vm.currentview 變化時(shí)改變！ -->
        </component>
     </template>
     <script>
         var home = {
          template: '<p>Welcome home!</p>'
        }
        var list = {
          template: '<p>Welcome list!</p>'
        }
        var detail = {
          template: '<p>Welcome detail!</p>'
        }
         export default {
             props:{
                 path:{
                    type:String,
                       default:'/page/1'
                },
                 id:{
                    type:String,
                       default:'1'
                }
             },
             watch: {
             　　'$route' (to, from) {
             　　        switch(this.$route.query.id){
                        case '1':this.currentView = home;break;
                        case '2':this.currentView = list;break;
                        case '3':this.currentView = detail;break;
                        default:this.currentView = home;
                    }
             　　}
            },
            data(){
                  return{
                      currentView: home
                  }
            }
         }
     </script>

做過類似的東西，根據(jù)不同的路由參數(shù)加載不同的組件，達(dá)到顯示不同數(shù)據(jù)格式的效果。
/sub/:subname/:dataType/:dataId

當(dāng)dataType為article時(shí)，引入article（文章）組件來顯示。
當(dāng)dataType為PicList時(shí)，引入PicList（卡片列表）組件來顯示。

<template>
省略...
<component v-if="DyComp" v-bind:is="DyComp.model" @updateContentTitle="udContentTitle" :dataIn="DyComp"></component>
省略...
</template>

<script>
import article from "./DataMask/article";
import PicList from "./DataMask/PicList";
export default {
    components: {
        article,
        PicList
    },
    data() {
        return {
            DyComp: {
                model: article,
                data: {}
            }
            }
    },
    
</script>

在sub.vue中引入子組件
在sub.vue中設(shè)置一個(gè)watch，因?yàn)槭歉鶕?jù)$route來進(jìn)行組件切換，所以要監(jiān)聽 $route的變化。

    watch: {
        $route: function() {
            var vm = this;
            var dataUri = this.$route.params.dataUri;
            var Dtype = this.$route.params。dataType;
            var articleTypeFresh=vm.arrObjFind(vm.menuList[vm.$route.params.type].list,'dataUri',vm.$route.params.dataUri)
                vm.DyComp.model = vm.Dtypes[Dtype];
                vm.DyComp.data = { ...vm.DyComp.data, dataUri };
        }
    }

當(dāng)sub中的route發(fā)生變化時(shí)，會(huì)根據(jù)dataType將對(duì)應(yīng)組件set到DyComp中，子組件根據(jù)DyComp進(jìn)行組件渲染，達(dá)到目的。

把特殊的寫在上面，下面寫全匹配的。

<div id="app">
  <p>
    <router-link to="/user/foo">/user/foo</router-link>
    <router-link to="/user/foo2">/user/foo2</router-link>
    <router-link to="/user/bar">/user/bar</router-link>
    <router-link to="/user/bar2">/user/bar2</router-link>
  </p>
  <router-view></router-view>
</div>

const User = {
  template: `<div>User {{ $route.params.id }}</div>`
}
const User1 = {
  template: `<div>User {{ $route.params }}</div>`
}
const User2 = {
  template: `<div>User {{ $route.params }} user2</div>`
}

const router = new VueRouter({
  routes: [
    { path: '/user/foo', component: User },
    { path: '/user/bar2', component: User2 },
    { path: '/user/:id', component: User1 }
  ]
})

const app = new Vue({ router }).$mount('#app')