Vue中路由到一個公共組件，然后根據路徑中是否存在文件動態加載組件

這個需求咋這么奇怪呢？這個需求想讓一個組件完成默認兜底的功能，比如某個產品的顯示，然后又留出定制化的功能，直接在固定的路徑中編寫vue，而不用再次定義路由。哎，寫到這里，感覺再手動定制下路由就可以了。

1、實現多個路由1個組件

這個直接定義即可，我使用的是 vue-element-admin，因此定義的路由如下：
這里使用import，webpackage可以支持動態載入組件，當然直接引入組件也是可以的。

{
    path: '/test',
    component: Layout,
    hidden: false,   
    meta: { title: 'test', icon: 'dashboard' },
    children: [{
      path: 'testa',
      name: 'testa',
      component: () => import('@/views/common/index'),
      meta: { title: 'test1', icon: 'dashboard' }
    },
    {
      path: 'testb',
      name: 'testb',
      component: () => import('@/views/common/index'),
      meta: { title: 'test2', icon: 'dashboard' }
    }
  ]
  },

經測試，其實例是不同的，每次切換都可以出發created()方法。

2、實現根據路徑動態載入組件的顯示

這里使用vue的component組件功能進行實現。
模板的定義如下：

<div class="block">    
        <keep-alive v-if="realCompoonent">
            <component :is= "realCompoonent" ></component>
        </keep-alive>  
    </div>

我們使用v-if來判斷是否需要顯示組件。

在下面的動態加載組件時，遇到了問題，因為webpackage的限制，其import無法使用變量，當然有網友說可以采用模板字符串方法，使前半段路徑固定，當然這個方式是極不友好的，因此我們使用require來完成加載的功能。

• 要點1：如果沒有文件，則用try catch摟住，
• 要點2： require獲取的不是組件，會得到 錯誤 Failed to mount component: template or render function not defined.

init(){
      var path = this.$route.fullPath
       try{          
           this.realCompoonent =  require(`@/views${path}`)
       }
       catch(ex){
           console.log(`load sub com [${path}] failed. ${ex}`)
           this.realCompoonent = null
       }
   }  

• 改進require，使用 .default

 this.realCompoonent =  require(`@/views${path}`).default

再次測試：OK。
看下截圖效果：

這里testa增加了組件定義，因此， 點擊test1可以顯示出來testa的組件。

3、 應用

暫時需要應用到某些公司的自定義頁面上，當然沒有完全結束，最好能夠從后台返回.vue文件，然后加載更好了~~~~,當然還需要進一步努力!

應該也可以應用到普通的增刪改查之類的，定義一個兜底文件，然后再二次開發擴展。

前端之路漫漫，吾將上下而求索！

關注我，一塊進步！