Vue 生成自动路由

背景：

在没有后台菜单配置路由的情况下，不想每次新建一个页面，就得在静态路由文件中添加一条路由信息，可以根据views目录结构生成自动路由。请按需食用。

原理：

利用webpack的api  require.context，实现指定目录文件的动态加载，可检索子目录。

语法：

require.context(
  directory,
  (useSubdirectories = true),
  (regExp = /^\.\/.*$/),
  (mode = 'sync')
);

参数：

directory:文件目录（必填）

useSubdirectories:是否检索子目录（非必填，默认true）

regExp:正则过滤（非必填，默认所有）

mode:加载模式（非必填，默认同步）

示例：

const reqRouter = require.context('@/views', true, /\.vue$/)

实现：

const reqRouter = require.context('@/views', true, /\.vue$/)

// 自动加载路由
const autoLoadRoutes = [];

// 自动加载
reqRouter.keys().forEach(key => {
  let reqRouterDefault = reqRouter(key).default
  if (!reqRouterDefault.commonComponent) {      //公共组件不参与路由配置,公共组件配置true
    let fileUrl = key.replace(/\.\//g, '')//匹配路径
    let routePath = fileUrl.split('.')[0];
    autoLoadRoutes.push({
      path: `/${routePath}`,
      name: routePath,
      meta: {
        title: reqRouterDefault.title,
        keepAlive: reqRouterDefault.keepAlive
      },
      component: () => import(`@/views/${fileUrl}`)
    })
  }
})
// 全部路由信息
const routes = [
  {
    path: '/',
    redirect: 'home'
  },
  {
    path: '/home',
    name: 'home',
    component: () => import('@/views//Home.vue')
  },
  {
    path: '/401',
    name: '401',
    component: () => import('@/views//Unauthorized.vue')
  },
  ...autoLoadRoutes,
]