VUE路由自动配置(即扫描指定路径自动加载路由)

主要是使用require.context函数，这个函数的作用是获取一个特定的上下文,主要用来实现自动化导入模块，vue官方文档上叫‘基础组件的自动化全局注册’。vue官方文档的描述
上代码：

Vue.use(Router)

const contexts = require.context('../view',true,/\.vue$/)	//通过正则获取匹配到的文件:第一个参数表示相对的文件目录，第二个参数表示是否包括子目录中的文件（true，false），如果有耳机目录既可以设置为true，第三个参数表示引入的文件匹配的正则表达式。
 
const routers = [];
contexts.keys().forEach(key=>{	
  // 获取组件配置
  //debugger
  const componentConfig = contexts(key).default;
	// 剥去文件名开头的 `./` 和`.vue`结尾的扩展名 
	const routePath = key.replace(/^\.\//,'').replace(/\.vue$/,'');
	// 全局注册组件
	routers.push({
		path: '/'+routePath,
		name: componentConfig.name,//缺少name属性！
		component: resolve => require([`../view/${routePath}`],resolve)
  })
  
})
  const router = new Router({
    mode: 'history',
    routes: [
      ...routers,
       {
         path: '/',
         redirect: '/default',
         component: resolve => require(['../view/default.vue'],resolve)
       },
       {
         //此项必须放在最后，代表不存在的请求路径，全部进默认画面
        path: '*',
        redirect: '/default',
        component: resolve => require(['../view/default.vue'],resolve)
      },
    ]
})

小结：这样不管是直接运行，还是打包部署后运行路由都是好用的。按网上的写法不用截取字符串即可获取name和path属性,但是我没成功，所以一步一步截取出来的path。代码中的name: componentConfig.name就是网上的方法，因此是name是undefined，如果想让name有值，则可以把name赋成我截取之后的routePath值，即name: routePath。我怀疑可能是因为我的组件的export写的有问题，因为我不是专业前端，对内部运行原理不了解，欢迎各路高手解惑。