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 下

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值