Vue 多路由文件的合并
2024-10-11 02:36:31
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合并数组的方式进行实现，导入两个路由模块的合并
最新文章
- SQL Server中行列转换 Pivot UnPivot
- 编译原理：正规式转变成DFA算法
- 关于IntentFilter的几点注意事项：
- iOS 网络编程
- （转）Excel导出及数据格式化处理
- 解析c语言背后的汇编代码
- emacs quick open and jump file (or buffer) which name is current word
- 2.11. 创建托管对象（Core Data 应用程序实践指南）
- Given a linked list, reverse the nodes of a linked list k at a time and return its modified list. If the number of nodes is not a multiple of k then left-out nodes in the end should remain as it is.
- 学会WCF之试错法——数据传输
- 曝Wi-Fi重大缺陷：你浏览的或是个假网站
- How Tomcat works — 二、tomcat启动（1）
- mongo中的模糊查询
- python kafka
- 不可不知 DDoS的攻击原理与防御方法
- Coach Said No Worry
- js-验证码插件gVerify.js
- Linux find、grep命令详细用法
- 转 C++11之std::function和std::bind
- Vue Element Form表单时间验证控件使用