vue路由模块化

在我们开发vue项目的时候，若是将所有的路由，写在一个路由文件下，此时路由文件就特别难以维护，路由文件看着也会错综复杂，不利于我们管理。所以路由的配置也要模块化。

main.js设置

mian.js中引用路由router

import Vue from 'vue'
import App from './App'
import router from './router'
import Antd from 'ant-design-vue'
import axios from 'axios'
import Distpicker from 'v-distpicker'
import IpConfig from './assets/IPConfig.js'
import 'ant-design-vue/dist/antd.css'

Vue.config.productionTip = false
Vue.use(Antd)
Vue.prototype.$ajax=axios;
Vue.component('v-distpicker', Distpicker)
Vue.prototype.IpConfig = IpConfig;
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

router下的目录结构

在router文件夹下创建modules模板文件夹，将需要模块化的路由文件创建在modules下。（由于项目，在文件前加数字区分，希望大家不要学我）

modules下的文件配置

// 配置 comprehensive
import Organiza from '@/components/1-comprehensive/1-ComprehensiveOffice/Organiza'
import OrganizaDetails from '@/components/1-comprehensive/1-ComprehensiveOffice/OrganizaDetails'
import Street from '@/components/1-comprehensive/2-TownshipStreets/Street'
import StreetDetails from '@/components/1-comprehensive/2-TownshipStreets/StreetDetails'
import Macroscopic from '@/components/1-comprehensive/3-MacroEconomy/Macroscopic'
import MacroscopicDetailes from '@/components/1-comprehensive/3-MacroEconomy/MacroscopicDetailes'
export default function (router) {
  router.push({
    path: '/Organiza',
    name: 'Organiza',
    component: Organiza
  },
    {
      path: '/OrganizaDetails',
      name: 'OrganizaDetails',
      component: OrganizaDetails
    },
    {
      path: '/Street',
      name: 'Street',
      component: Street
    },
    {
      path: '/StreetDetails',
      name: 'StreetDetails',
      component: StreetDetails
    },
    {
      path: '/Macroscopic',
      name: 'Macroscopic',
      component: Macroscopic
    },
    {
      path: '/MacroscopicDetailes',
      name: 'MacroscopicDetailes',
      component: MacroscopicDetailes
    },
  )
}

router下的index.js设置

index.js是router目录下的出口文件
引用 modules 文件夹下的每个模块文件

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'

import comprehensive from './modules/1-comprehensive' //引用comprehensive路由模块
import peopleArmedForces from './modules/2-peopleArmedForces'//引用peopleArmedForces路由模块
import jingjidongyuan from './modules/3-jingjidongyuan'//引用jingjidongyuan路由模块
import renMinFangKong from './modules/4-renMinFangKong'//引用renMinFangKong路由模块
import jiaoTongZhanBei from './modules/5-jiaoTongZhanBei'//引用jiaoTongZhanBei路由模块
import xinXiDongYuan from './modules/6-xinXiDongYuan'//引用xinXiDongYuan 路由模块
import zhengZhiDongYuan from './modules/7-zhengZhiDongYuan'//引用zhengZhiDongYuan 路由模块
Vue.use(Router)
let routes = []

let allRouter = {
  path: '/',
  component: Home,
  children: [],
}
comprehensive(allRouter.children)
peopleArmedForces(allRouter.children)
jingjidongyuan(allRouter.children)
renMinFangKong(allRouter.children)
jiaoTongZhanBei(allRouter.children)
xinXiDongYuan(allRouter.children)
zhengZhiDongYuan(allRouter.children)
routes = [allRouter ];
export default new Router({
  mode: 'history',//去掉路由地址的#
  routes: routes
})

所有页面路由配置在 allRouter的 children 下