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组件