vue使用require.context实现动态注册路由

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)


// 查询指定文件夹下的vue页面，自动注册路由
// 仅适用于：一个文件夹下的多个路由页面。用于简单的页面的注册
// pathConfig.default的内容，是指定的vue页面的default模块内容，等同于: () => import('xxxx')
const contextInfo = require.context('../views', false, /.vue$/);
let routerAry = []
contextInfo.keys().forEach(fileName => {
  const pathConfig = contextInfo(fileName)
  let path = "/" + fileName.substring(2,fileName.length-4)
  routerAry.push({
    path,
    component: pathConfig.default
  })
})

const routerList = [
  {
    path: "/",
    redirect: "/animate",
  },
  {
    path: "/openlayers",
    component: () => import('../views/openlayers/openlayers')
  },{
    path: "/render",
    component: () => import('../views/render/render')
  },{
    path: '/vuex',
    component: () => import('../views/vuex/vuex')
  },{
    path: "/echarts",
    component: () => import('../views/echarts/echarts')
  },{
    path: "/ztree",
    component: () => import('../views/ztree/ztree')
  },{
    path: "/ocxplayer",
    component: () => import('../views/ocxplayer/ocxplayer')
  },{
    path: "/animation",
    component: () => import('../views/animation/animation')
  },
]
const newRouterAry = routerList.concat(routerAry)
const router = new VueRouter({
  routes: newRouterAry
})
export default router