vue vue-router 项目自动化之-路由自动生成，解放手动配置

在vue前端项目开发中，路由与创建文件是完全不相关的两个动作，一般情况下我们都是先把创建好文件，然后到指定的路由配置文件中进行对路由的配置

但是观察下来，你会发现配置路由这一块会有些许眼熟，正是与我们文件路径重合啦
有一个大胆的想法，就是直接使用我们的文件路径当做路由，便可以免去路由配置这一动作

本文将介绍如何使用 Vue2 + webpack 实现路由自动配置。

第一步：使用fileAutomate工具函数获取页面文件夹下所有页面文件

fileAutomate工具函数文章

let fileArr = util.auto.fileAutomate(require.context('@/views',true,/.vue$/))

第二步：对数据进行处理（处理成她喜欢的样子）

let pages = []
fileArr.forEach(item => {
let path = '/'+item.path.replace(/(.*)\/index.vue/,'$1')
  pages.push({
    path: item.content.path || path,
    name: item.content.meta.name || path,
    meta: {...item.content.meta,name: item.content.title},
    component: item.content
  })
})

 第三步：将处理好后的数据赋值给VueRouter

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: pages
})

完整后代码：

router/index.js文件

import Vue from 'vue'
import VueRouter from 'vue-router'
import util from '@/utils'

Vue.use(VueRouter)

let fileArr = util.auto.fileAutomate(require.context('@/views',true,/.vue$/))

let pages = []

fileArr.forEach(item => {
let path = '/'+item.path.replace(/(.*)\/index.vue/,'$1')
  pages.push({
    path: item.content.path || path,
    name: item.content.meta.name || path,
    meta: {...item.content.meta,name: item.content.title},
    component: item.content
  })
})

const routes = [
  {
    path: '/',
    name: 'layout',
    component: () => import('@/layouts/index.vue'),
    redirect: '/home',
    children: pages
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router