vue-router如何批量设置，上百个页面逐个import太多了

Question

//router.js
importRouterfrom'vue-router'
importVuefrom'vue'
importloginfrom'./components/views/login'
importchatfrom'./components/views/chat'
importAppfrom'./index'
Vue.use(Router)
exportdefaultnewRouter({
mode:'abstract',
routes:[
{path:'/login',component:login},
{path:'/chat',component:chat},
{path:'/',component:App}
]
})
举个例子，上面只有3个页面，就需要import3次，下面routes要写3个映射。如果是上百个页面的系统，不是要写死人？

Answer 1

你可以反过来思考这样的两个问题为什么一样要手写Router？Router的所有功能都是我们需要的吗？Router是什么，他就像是一本字典，带领你走向应用的站点地图。既然是字典，一一对应不是更好吗？既然能做一一对应，也就不需要手写，仅仅只需要进行一次目录读取即可。你可以使用nodejs进行预读，也可以通过webpack进行预读，按照文件的摆放结构来生成路由。这个能解决第一个问题，至于第二个问题，其实大部分路由的功能我们是用不到的，或者可以封装在你自己的框架中，以减少开发者的编写和维护成本。你可以参考一下nuxt.js，他里面的路由就是被抽象化了的，你只需要按要求合理的放文件和文件夹即可。