vue路由自动生成

在写vue项目时，遇到页面跳转很多，需要配置很多路由，一个一个路由配置的话非常麻烦，修改起来也不方便。如下所示：

export default new Router({
  routes: [
      {path: '/', name: 'home', component: require('@/pages/home.vue')},
      {path: '/demo1', name: 'demo1', component: require('@/pages/demo1.vue')},
      {path: '/demo2', name: 'demo2', component: require('@/pages/demo2.vue')},
      {path: '/demo3', name: 'demo3', component: require('@/pages/demo3.vue')},
      {path: '/demo4', name: 'demo4', component: require('@/pages/demo4.vue')},
      {path: '/demo5', name: 'demo5', component: require('@/pages/demo5.vue')},
      {path: '/demo6', name: 'demo6', component: require('@/pages/demo6.vue')},
      {path: '/demo7', name: 'demo7', component: require('@/pages/demo7.vue')},
    {
      path: '*',
      redirect: '/'
    }
  ]
});

通过vue的模块系统实现路由自动生成。方法如下：

1. 自动导出当前文件夹中的所有vue文件

const files = require.context('.', false, /\.vue$/)

const pages = {}


files.keys().forEach(key => {

pages[key.replace(/(\.\/|\.vue)/g, '')] = files(key).default

})


export default pages

2. 构造路由表

import Vue from 'vue'

import Router from 'vue-router'

import pages from '@/pages' // 页面文件目录


Vue.use(Router)


let routes = [];

Object.keys(pages).forEach(item=>{

    routes.push({

        path: `/${pages[item].name}`,

        name: pages[item].name,

        component: pages[item]

    })

});

3. 配置路由

export default new Router({

routes: [
    ...routes,

    {

        path: '*',

        redirect: '/'

    }]

});