vue 路由自動化[讀取vue檔案目錄][支援children]

//@呼呼扯 2019/4/3
import Vue from 'vue'
import Router from 'vue-router'
import login from '@/components/login.vue'
import home,{titleText} from '@/components/home.vue';
console.log('歡迎訪問',titleText);
const requireComponent = require.context('@/components/air', true, /\.vue$/);

var routes = [
    {
      path:'/',
      redirect:{name:'home'}
    },
    {
      path: '/login',
      name: 'login',
      component: login
    },
    {
        path: '/home', 
        name: 'home', 
        meta:{'linkName': titleText},
        component:home,
        children:[] //children 對應 require.context('@/components/{xxx}')
}];
const homeIndex = routes.length -1;//home位置 下方有用
//路由自動化註冊
const route_base = requireComponent.keys().map(fileName => {
    const componentConfig = requireComponent(fileName);
    const componentName = fileName.replace(/^\.\//,'').replace(/\.vue$/,'');// 剝去檔名開頭的 `./` 和`.vue`結尾的副檔名
    const componentNameRe = componentName.replace(/\//g,'-');
    const component = Vue.component(componentNameRe,componentConfig.default || componentConfig);
    const result = {
        path: '/'+componentName, //control/calibration/advanced
        name: componentNameRe, // control-calibration-advanced
        meta:{'linkName':componentConfig.titleText},
        component,
        children:[]
    }
   const arr = componentNameRe.split('-');
   if(arr.length>1){
      equivalArray(arr,result);// arr = ["control", "calibration", "advanced"] , result = path/name/meta/component
   }else{
      routes[homeIndex].children.push(result);//無父級路由子項由此進入
   }
    return result
});

function equivalArray(arr,result){
    arr.pop();
    var pname = arr.join("-")
    recursiveTraverse(routes[homeIndex],(node)=>{
      if(node.name == pname){//父級匹配
        node.children.push(result);
      }
    })
}
//利用遞迴與引用值特性
 function recursiveTraverse(node, action) {
  if (!node || !node.children) { return; }
    action(node);
    node.children.forEach(function(item, index) {
      recursiveTraverse(item, action);
    });
}
Vue.use(Router);
export default new Router({
  // mode: 'history',
  mode: 'hash',
  routes:routes 
})
 console.log(routes,'of');複製程式碼

目錄結構如下：