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

Question

//router.jsimportRouterfrom'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，他里面的路由就是被抽象化了的，你只需要按要求合理的放文件和文件夹即可。