Vue项目中模块化封装vue-router（易拓展、可维护）

实现思路

1. 引入Vue和VueRouter库；

2. 通过引入项目组所需使用的组件，包括Login、Home、FirstRouter和SecondRouter等；

3. 定义了一个createRoute函数，用于创建路由对象，包括以下几个属性：路径（path）、名称（name）、组件（component）、重定向（redirect）、标题（title）、按钮权限（btnPermissions）和子路由（children）；

4. 通过调用createRoute函数，创建了一个路由对象数组allRoutes。数组中的元素通过调用createRoute函数创建的路由对象，这些路由对象包括根路径的路由对象、一级路由的路由对象（二级路由对象、三级…）;

5. 将allRoutes数组通过扩展运算符（…）展开，并赋值给变量routes，形成了完整的路由对象数组。

6. 最后，通过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;