vue项目自动根据文件目录生成vue路由

前言

每添加一个新的页面都需要手动添加路由虽然不是一件很麻烦的动作，但也是件很繁琐的动作。如果能够在创建文件的时候自动生成路由，不需要改路由的配置配置文件还是能省一些动作避免一些错误，比如引入文件路径不对、文件名写错、大小写不对等也不失为一种好的方法。

 

技术栈

vue项目使用element-ui框架

 

实现

不意外的导入依赖

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

 

配置添加路由规则

const filterOptions = {
  include: [],
  exclude: ['test']
}

 

关键代码

需要添加路由的文件必须放在“children”文件夹里面

function genRouters ({ include, exclude }) {
  const contexts = require.context(
    '../views/',
    true,
    /\.\/(((?!\/).)*|(.*)?children\/(.*)?)\/index\.vue$/,
    'lazy'
  )
  const routers = []
  const pathArray = contexts
    .keys()
    .map(dir => {
      const arr = dir
        .slice(dir.indexOf('/') + 1, dir.lastIndexOf('/'))
        .split('/')
      return filterRouters(arr[0]) ? arr : []
    })
    .sort((a, b) => a.length - b.length)

  function filterRouters (router) {
    if (!include.length && exclude.length) {
      return exclude.indexOf(router) === -1
    }
    if (include.length && !exclude.length) return include.indexOf(router) > -1
    if (include.length && exclude.length) {
      return exclude.indexOf(router) === -1 && include.indexOf(router) > -1
    }
  }

  function path2Routers (arr, result = [], i = 0) {
    let el = arr[i++]
    if (!el) return
    if (el === 'children') {
      el = arr[i++]
    }
    const filterItem = result.filter(item => item.name === el)[0]
    if (filterItem) {
      path2Routers(arr, filterItem.children, i)
    } else {
      const path = arr.slice(0, i).join('/')
      const obj = {
        name: el,
        children: [],
        path: '/' + path.replace(/\/children/g, ''),
        component: () =>
                    import(/* webpackChunkName: "index-[request]" */
                      /* webpackInclude: /children(\/|\\).*(\/|\\)index\.vue$/ */
                      `../views/${path}`)
      }
      result.push(obj)
      path2Routers(arr, obj.children, i)
    }
    return result
  }

  pathArray.forEach(item => {
    if (!item.length) return
    const name = item[0]
    if (item.length === 1) {
      routers.push({
        name,
        children: [],
        path: `/${name}`,
        component: () =>
                    import(/* webpackChunkName: "index-[request]" */
                      /* webpackInclude: /views(\/|\\)((?!(\/|\\)).)*(\/|\\)index\.vue$/ */
                      `../views/${name}`)
      })
    } else {
      path2Routers(item, routers)
    }
  })

  return routers
}

 

创建路由实例

const router = new Router({
  routes: [{
    path: '/',
    redirect: '/login'
  },
  ...genRouters(filterOptions)
  ]
})

 

路由守卫

router.beforeEach((to, from, next) => {
  // do something...
  NProgress.start()
  next()
})

router.afterEach((to, from) => {
  // do something...
  NProgress.done()
})

export default router