vue 路由模块化

为什么要将路由进行模块化？路由模块化有什么好处？

假设你写的项目就有几个页面那就没有必要用到路由模块化，要是有N多个页面我们就需要再router.js里面写N多个路由，此时我们就要用到路由模块化来对这些路由进行分类管理，以便我们后期对其进行管理，这样一来我们的代码也不会看上去那么的繁琐

---

创建文件夹

下图所示：在 src 文件夹里创建 router 文件夹 router 文件夹里面分别创建一个 router.js 用来注册路由，创建一个 module 文件夹来进行模块化路由 study.js 将study类的所有模块路由都可以放进去，user.js 将user类的所有模块路由都可以放进去(根据自己的需求来进行创建)

进行模块化路由

 uesr.js文件代码如下：

// 引入要注册路由的组件
import login from "@/views/user/login.vue";
import register from "@/views/user/register.vue";

// 在模块化里以对象的形式将我们注册的路由抛出
export default [
  {
    path: "/login",
    name: "login",
    component: login,
  },
  {
    path: "/register",
    name: "register",
    component: register,
  },
];

study.js 文件代码同 user.js文件代码

注册模块化后的路由

在router.js里面进行注册，代码如下：

// 引入路由模式
import { createRouter, createWebHistory } from "vue-router";

// 引入要注册路由的组件
import HomeView from "../views/HomeView.vue";

// 引入刚写好的模块化路由文件
import study from './module/study'
import user from "./module/user";

// 注册路由
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      //配置home页面
      path: "/",
      name: "home",
      component: HomeView,
    },
    // ...进行结构模块化好的路由并进行注册
    ...study,
    ...user,
  ],
});

// 将注册号的路由抛出
export default router;