实现思路
-
引入Vue和VueRouter库;
-
通过引入项目组所需使用的组件,包括Login、Home、FirstRouter和SecondRouter等;
-
定义了一个createRoute函数,用于创建路由对象,包括以下几个属性:路径(path)、名称(name)、组件(component)、重定向(redirect)、标题(title)、按钮权限(btnPermissions)和子路由(children);
-
通过调用createRoute函数,创建了一个路由对象数组allRoutes。数组中的元素通过调用createRoute函数创建的路由对象,这些路由对象包括根路径的路由对象、一级路由的路由对象(二级路由对象、三级…);
-
将allRoutes数组通过扩展运算符(…)展开,并赋值给变量routes,形成了完整的路由对象数组。
-
最后,通过export default将routes导出;
完整代码
import Vue from "vue";
import VueRouter from "vue-router";
// 引入所需的组件
import Login from './components/Login.vue';
import Home from './components/Home.vue';
import FirstRouter from './components/FirstRouter.vue';
import SecondRouter from './components/SecondRouter.vue';
// 创建路由对象函数
function createRoute(path, name, component, redirect, title, btnPermissions = [], children = []) {
return {
path,
name,
component,
redirect,
meta: {
title,
btnPermissions
},
children
};
}
// 创建路由对象数组
const allRoutes = [
createRoute('/', '', null, '/first-router', '', [], []),
createRoute('/first-router', 'FirstRouter', FirstRouter, '', '一级路由页面', ['admin'], [
createRoute('/first-router/second-router', 'SecondRouter', SecondRouter, '', '二级路由页面', [], [三级路由对象...])
// 添加其他二级路由对象
]),
// 添加其他一级路由对象
];
// 创建完整的路由对象数组
const routes = [
...allRoutes,
];
export default routes;