Vue 多路由文件的合并
1.使用的是ES6 数组的合并方法
let routes = new Set([...routes1, ...homerouters]);
2.两个路由文件,导出的实际上就是一个数组
//route.js文件
export default [
{
path: "/login",
component: (resolve) => require(['../views/login.vue'], resolve)//实现懒加载
},
{
path: "/home",
component: (resolve) => require(['../views/home.vue'], resolve),
children: [
{
path: '/project',
component: (resolve) => require(['../views/project.vue'], resolve)
}, {
path: '/building',
component: (resolve) => require(['../views/building.vue'], resolve)
}, {
path: '/floor',
component: (resolve) => require(['../views/floor.vue'], resolve)
}, {
path: '/room',
component: (resolve) => require(['../views/room.vue'], resolve)
},{
path: '/device',
component: (resolve) => require(['../views/menu.vue'], resolve)
},{
path: '/collector',
component: (resolve) => require(['../views/collector.vue'], resolve)
},
{
path: "/model",
component: (resolve) => require(['../views/model.vue'], resolve)
}
]
},
]
//homeroutes.js 文件,实际上导出的就是一个数组
export default [
{
path: '/',
component: (resolve) => require(['../views/Index.vue'], resolve)
},
{
path: '/mainhome',
component: (resolve) => require(['../views/Home.vue'], resolve),
children: [
{
path: '/',
component: (resolve) => require(['../views/Home.vue'], resolve)
},
{
path: 'tree',
component: (resolve) => require(['../components/Tree.vue'], resolve)
},
{
path: 'table',
component: (resolve) => require(['../components/Table.vue'], resolve)
},
{
path: 'electricalmeasurement',
component: (resolve) => require(['../components/ElectricalMeasurement.vue'], resolve)
}
]
},
{
path: '/table',
component: (resolve) => require(['../components/Table.vue'], resolve)
},
{
path: "*",
component: (resolve) => require(['../views/Index.vue'], resolve)
},
]
导入两个路由文件,进行数组合并之后,传入VueRoute实例化的参数中
//是index.js 文件
import Vue from 'vue'
import VueRouter from 'vue-router' //路由
import routes1 from "./Admin/route/route.js"//导入路由文件
import homerouters from "./Home/routers/homerouters.js"//g前端页面路由
Vue.use(VueRouter)
//合并两个路由
let routes = new Set([...routes1, ...homerouters]);
const router = new VueRouter({
routes,
mode: 'history'
})
总结:
1.多路由文件实现,实际上是为了分开管理不同模块的路由文件,便于管理和查找
2.在vue的组件开发中,使用的ES6的语法,所以使用的是ES6合并数组的方式进行实现,导入两个路由模块的合并