vue使用require.context配置路由

使用require.context自動配置路由

首先在components文件夾下新建一個pages文件夾，然後在pages下面新建兩個vue文件mode.index.vue和mode.show.vue，在components文件夾下新建一個index.route.js文件

//index.route.js
var r=require.context('./pages',true,/.vue/)
var arr=[]
r.keys().forEach(element => {
    var key=element.split('.')
    if(element.indexOf('index')>-1){
        arr.push({path:key[1],
                component:r(element).default
        })
    }else{
        arr.push({path:key[1]+'/'+key[2],
        component:r(element).default
    })
    }
});

export default arr

然後在路由文件中引入

var r=require.context('../components/pages',true,/.route.js$/)

var arr=[]
r.keys().forEach(element => {
  arr=arr.concat(r(element).default)
});

export default new Router({
   routes: [
    ...arr
   ]
 
})

這樣訪問/mode就會顯示mode.index.vue組件，訪問/mode/show就會顯示mode.show.vue組件