[JavaScript知识库] 超前图解，前端vue-router模块化拆分的方式?

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 超前图解，前端vue-router模块化拆分的方式? -> 正文阅读

[JavaScript知识库]超前图解，前端vue-router模块化拆分的方式?

在这里插入图片描述

👀前端小伙伴们，在日常开发中，会遇到非常多的路由【10-100 等等】；这个时候就需要我们把路由进行模块化拆分👇 👇 👇

一📌未拆分前结构：

在这里插入图片描述

一🍖1、新建子模块`navbar目录`

在src下的 router目录中 新建 navbar目录 创建 index.js

在这里插入图片描述

一🥪2、新建子模块`index.js`

// 导航栏 路由拆分
// 导航栏 子路由
export default [
  // 首页
  {
    path: "/",
    name: "home",
    component: () => import(/* webpackChunkName: "home" */ "@/views/Home.vue"),
  },
  //关于
  {
    path: "/about",
    name: "about",
    component: () =>
      import(/* webpackChunkName: "about" */ "@/views/About.vue"),
  },
  // 案例
  {
    path: "/demo",
    name: "demo",
    component: () => import(/* webpackChunkName: "about" */ "@/views/demo"),
  },
  // 初级前端
  {
    path: "/elementary",
    name: "elementary",
    component: () =>
      import(/* webpackChunkName: "about" */ "@/views/Elementary.vue"),
  },
  // 中级前端
  {
    path: "/middlerank",
    name: "middlerank",
    component: () =>
      import(/* webpackChunkName: "about" */ "@/views/Middlerank.vue"),
  },
  // 高级前端
  {
    path: "/advanced",
    name: "advanced",
    component: () =>
      import(/* webpackChunkName: "about" */ "@/views/Advanced.vue"),
  },
];

一🍦3、将模块引入到 router.js 中

在这里插入图片描述

//router.js 根文件
import Navbar from "./router/navbar/index"; //引入导航栏路由模块
...
export default new Router({
  mode: "history",
  base: process.env.BASE_URL,
  routes: [
    ...Navbar, // 展开导航栏路由
    //...Gengduo更多路由
    //拆分更多子路由  方法同上
  ],
});