VUE路由模块化设计（老奶奶教程，包会）

前言

在开发中vue路由使用是很多的，大量的路由导致我们开发人员后期维护十分麻烦，所以对于路由我们应该对其模块化，接下来我将一步一步教导大家如何将vue路由模块化。

一、项目目录结构

在src目录中创建router文件夹，在router文件夹下创建index.js文件与moudles文件夹。其中index.js文件夹用于统合moudles文件夹下的js文件，也就是路由。

二、index.js文件代码

import Vue from 'vue'
import VueRouter from 'vue-router' //引入vue路由
import rou from './moudles/rou'    //引入rou.js文件
import rout from './moudles/rout'  //引入rout.js文件

Vue.use(VueRouter)

const routes = [
    rou,
    rout,    
]
const router = new VueRouter({
    routes
})

export default router  // 默认导出一个router对象

2.rou.js文件

import MyOneDome from '@/components/MyOneDome.vue'  //引入MyOneDome组件
import MyTwoDome from '@/components/MyTwoDome.vue'
export default{ 
    path: '/MyTwoDome', component: MyOneDome, children: [{ path: '', component: MyTwoDome }] ,
    
}

3.rout.js文件

import MyOneDome from '@/components/MyOneDome.vue'
import MyOneDome2 from '@/components/MyOneDome2.vue'
import MyOneDome3 from '@/components/MyOneDome3.vue'


export default {

    path: '/MyOneDome', component: MyOneDome, children: [{ path: '', component: MyOneDome3, children: [{ path: '', component: MyOneDome2 }] }]

}

4.main.js文件

import Vue from 'vue'
import App from './App.vue'
import router from './router/index'  //引入index.js文件
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
import '../node_modules/bootstrap/dist/css/bootstrap.css'
import '../node_modules/bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)

Vue.use(IconsPlugin)


Vue.config.productionTip = false



new Vue({
  router, //在这里获取index.js文件传递的router
  render: h => h(App),
}).$mount('#apps') //抓载到App.vue中id为apps的div

4.App.vue

<template>
  <div id="apps">
    
    <router-link to="/MyOneDome">任务一</router-link>
    <router-link to="/MyTwoDome">任务二</router-link>
    
    <router-view></router-view> //路由出口，渲染页面
  </div>
</template>

<script>


//任务二
// import MyTwoDome from './components/MytTwoDome.vue'

export default {
  name: "App",
  components: {
  
  },
};
</script>

<style>
* {
  margin: 0px;
  padding: 0px;
}


.claer {
  clear: both;
}
</style>

以上就是vue路由模块化的全部流程，不过过于简单，对于大型显目来说还不足以应对，如果需要其他功能需自行添加。