vue项目使用webpack的require.context实现动态创建路由

autorouter.js文件

function importAll(r) {
    let __modules = {}
    console.log(r.keys()) //可以得到一串数组，是所有以.vue为后缀的文件路径
    r.keys().forEach(key => {
            let m = r(key).default
            let n = m.name || getfilename(m.__file)
            console.log(m)
            __modules[n] = m
        })
        // console.log(__modules, 'll')
    return __modules
}

//获取路径中的文件名称
function getfilename(filename) {
    let arr = filename.split('/')
    let filenameword = arr[arr.length - 1].split('.')
    return filenameword[0]
}
//webpack的方法可以获取某一文件夹views下以.vue结尾的文件，第二个参数表示是否包含views内部文件夹里的文件
export default importAll(require.context('@/views', true, /\.vue$/))

此处在路由index.js中引入

import importAll from './autorouter'

import Vue from 'vue'
import VueRouter from 'vue-router'
import importAll from './autorouter'
Vue.use(VueRouter)
let children = []
for (let item in importAll) {
    // Vue.use(importAll[item])
    if (item !== 'Login') children.push({ path: `/${item}`, component: importAll[item] })
}
const routes = [{
        path: '/',
        redirect: '/login'
    },
    {
        path: '/login',
        component: importAll.Login//使用
    }, {
        path: '/main',
        component: importAll.Main,
        children: children
    },]

const router = new VueRouter({
    routes
})

export default router