Vue 实现路由自动加载

路由自动加载需要用到 require.context 来读取文件, 具体咱们往下瞅~

#. require.context 是什么

一个 webpack 的 api, 通过执行 require.context 函数获取一个特定的上下文,主要用来实现自动化导入模块, 在前端工程中, 如果遇到从一个文件夹引入很多模块的情况, 可以使用这个 api, 它会遍历文件夹中的指定文件, 然后自动导入, 使得不需要每次显式的调用 import 导入模块

#. 普通引入

export default new Router({
    mode:"history",
    routes: [
      {
        path: '/login',
        component: () => import('../view/login')
      },
      {
        path: '/index',
        component: () => import('../view/index')
      }
    ]
})

#. 自动加载

Vue.use(VueRouter)

const autoLoadRoutes = [];
const reqRouter = require.context('./view', true, /\.vue$/)
reqRouter.keys().forEach(name => {
    let fileUrl = key.replace(/\.\//g, ''),//匹配路径
    len = fileUrl .split('/').length,
    name = (reqRouter(key).default.name || fileUrl.split('/')[len - 1]).split('.')[0];
 
    if(name != 'login'){
        autoLoadRoutes.push({
            path: `/${name}`,
            name: name,
            component: r => require([`../views/${fileUrl}`],r)
        })
    }
})

const router = new VueRouter({
    mode: 'history'
    routes: [
      {
        path: '/',
        component: () => import('../components/Welcome')
      },
      ...autoLoadRoutes
    ]
})

export default router

注意
component: r => require([`../views/${fileUrl}`],r)
如果写成
component: r => require([`${fileUrl}`],r) // fileUrl 为正确路径
会报错 Error: Cannot find module '@/views/menu/index'

因为不管是 require 还是 () => import(`${fileUrl}`) 都不支持动态地址即变量方式

动态地址可以这么写
let tmpView = viewUrl => resolve => require([`${viewUrl}`], resolve);)

还有个问题... (╥╯^╰╥)
路由嵌套暂时解决不了, 望有知道的大佬多多指点～