【VueRouter】VueRouter路由模块化拆分

需求分析

如果工程一旦大起来之后router/index.js文件中的代码行数就会越来越多, 路由以及子路由的各种嵌套着实让人眼花缭乱。那么有没有一种方式能够拆分路由并且让每一个路由看起来更加直观呢？

诸位请看 ↓ ↓ ↓

模块化之前的路由

import Index from "@/views";
import  Home  from "@/views/Home";

const routes = [
    {
        path: "/",
        name: "index",
        component: Index,
        // 重定向到首页/home
        redirect: "/home",
        children: [
            // 首页
            {
                path: "/home",
                name: "home",
                component: Home,
            },
            // 最新失物
            {
                path: "/latestLost",
                name: "latestLost",
                component: () => import("@/views/LatestLost"),
                children: [
                    {
                        path: "/latestLost/item/:id",
                        name: "item",
                        component: () => import("@/components/ItemCard"),
                    },
                ],
            },
            // 分类预览
            {
                path: "/categoryPreview",
                name: "categoryPreview",
                component: () => import("@/views/CategoryPreview"),
            },
            // 已认领
            {
                path: "/alreadyClaimed",
                name: "alreadyClaimed",
                component: () => import("@/views/AlreadyClaimed"),
            },
            // 个人中心
            {
                path: "/personalCenter",
                name: "personalCenter",
                component: () => import("@/views/PersonalCenter"),
            },
            // 帮助与反馈
            {
                path: "/helpAndFeedback",
                name: "helpAndFeedback",
                component: () => import("@/views/HelpAndFeedback"),
            },
        ],
    },
    {
        path: "/login",
        name: "login",
        component: Login,
    },
    // 关于我们
    {
        path: "/about",
        name: "about",
        component: () => import("@/views/About"),
    },
];

const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),
    routes,
});

export default router;

如果工程一旦大起来之后router/index.js文件中的代码行数就会越来越多, 路由以及子路由的各种嵌套着实让人眼花缭乱。

模块化之后的路由

文件结构

如果把每个路由都拆分出来各自放到自己的文件中，互不干扰，拆分后的路由文件结构以及内容如下：

每个路由互不干扰

代码示例

模块化拆分教学

原来的路由

alreadyClaimed
categoryPreview
helpAndFeedback
home
personalCenter

被拆分并且分散到了各个文件中:

我列举出其中两个, 例如 home 和personalCenter 分别放到了homeRoute和personalCenterRoute中

homeRoute/index.js内容如下

// 首页路由
import { newFeatureRoute } from './components/newFeatureRoute';

export const homeRoute = [
  {
    path: '/',
    name: 'home',
    component: () => import('@/views/Home'),
    children: [
      ...newFeatureRoute
    ]
  }
]

personalCenterRoute/index.js内容如下

// 个人中心路由
export const personalCenterRoute = [
    {
        path: '/personalCenter',
        name: 'personalCenter',
        component: () => import('@/views/PersonalCenter'),
        meta: {
            title: '个人中心',
        }
    }
]

router/routeModel/index.js

import Index from "@/views";

import { alreadyClaimedRoute } from "./alreadyClaimedRoute";
import { categoryPreviewRoute } from "./categoryPreviewRoute";
import { helpAndFeedbackRoute } from "./helpAndFeedbackRoute";
import { homeRoute } from "./homeRoute";
import { latestLostRoute } from "./latestLostRoute";
import { personalCenterRoute } from "./personalCenterRoute";

import { aboutRoute } from "./aboutRoute";
import { loginRoute } from "./loginRoute";



export const routeModel = [
  {
    path: "/",
    name: "index",
    component: Index,
    // 重定向到首页/home
    redirect: "/",
    children: [
      ...homeRoute,
      ...helpAndFeedbackRoute,
      ...personalCenterRoute,
      ...latestLostRoute,
      ...alreadyClaimedRoute,
      ...categoryPreviewRoute,
      
    ],
  },
  ...loginRoute,
  ...aboutRoute,
];

router/index.js

import { createRouter, createWebHistory } from "vue-router";

// 引入通用路由
import {routeModel} from "@/router/routeModel/index.js";
 
// 整合所有路由模块
let modelRoute = []
  .concat(routeModel)

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes: [...modelRoute],
});

export default router;

---

为什么要将路由模块化

这样做的好处就是， 比如home页面想要添加更多的视图的时候，就可以在homeRoute文件中新建一个newFeatureRoute.js, 这样就算有更加多的视图需要创建并添加到首页, 我们只需要在homeRoute中再添加一个文件存储路由即可

或者在homeRoute中建一个components/newFeatureRoute.js作为新视图的路由:

比如:

文件结构如下

components/newFeatureRoute.js

// 新功能路由
export const newFeatureRoute = {
  name: 'newFeature',
  path: '/new-feature',
  component: () => import('@/views/newFeature/NewFeature.vue'),
  meta: {
    title: 'New Feature',
    requiresAuth: true,
  },
};

在homeRoute/index.js中引用newFeatureRoute

// 引入新功能路由
import { newFeatureRoute } from './components/newFeatureRoute';

export const homeRoute = [
  {
    path: '/',
    name: 'home',
    component: () => import('@/views/Home'),
    children: [
      // 解构
      ...newFeatureRoute
    ]
  }
]

总结

通过将路由功能分解为独立的模块，系统能够根据实际需求加载或替换特定模块，而无需修改核心路由逻辑, 每个模块聚焦于单一职责，使得代码结构更为清晰，便于团队成员理解和维护。路由模块化减少了各组件间的依赖关系，使得系统各部分之间的耦合度降低,修改或升级一个模块时，对其他模块的影响降到最低，有利于系统的长期稳定和迭代发展。