导言

此方案为懒人方案，在中大型项目开发中，个人认为是十分友好的。避免了一大撂的文件冲突，然后Router的入口文件十分庞大，且可观性不强。采取自动化挂载方案后，只需要去维护好子级路由信息，无需在路由入口文件一个个添加、引入。一切交给自动化。

具体实现：

• 路由入口文件

个人习惯命名为：/src/router/index.js，子级路由配置在src/router/src下，具体的可根据自己项目的实际情况来定义。

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)
let routes = []
// 将 src 文件夹下遍历得到的的路由文件，存储至routeFiles数组内
const routeFiles = require.context(
  './src',
  true,
  /.js$/
)

// 遍历数组，将路由文件内的路由数据合并至数组内
routeFiles.keys().forEach((key) => {
  routes = [...routes, ...routeFiles(key).default]
})

const router = new VueRouter({
  mode: 'history',
  routes
})
router.beforeEach((to, from, next) => {
  // 此处是为了避免同路由作死的点，导致Console报错。个人强迫症，可无视
  if (to.path === from.path) {
    return
  }
  next()
})
export default router

• 子级文件内容

export default [
  {
     path:"/xxx",
     name:"xxx",
     ...
  }
]

• main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './style/index.scss'
import './init'
import ELEMENTUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false
Vue.use(ELEMENTUI, { size: 'small', zIndex: 460 })
new Vue({
  router,
  render: (h) => h(App)
}).$mount('#app')