Vue路由按模块拆分配置

╰半夏微凉° 2022-11-21 01:26 226阅读 0赞

[https://www.jianshu.com/p/2833243987dd][https_www.jianshu.com_p_2833243987dd]

通常我们编写vue路由配置都会写在 `/src/router/index.js` 这个文件下。  
但是，随着我们的vue项目变得越来越大后，路由也随之变得越来越多，出现的问题就是我们所有的路由都定义在一个文件下，代码会变得可读性差，难以维护。 如下图所示。

![4628af8c104c1745dbbf95ce775e2b81.webp][]

然后我们再抽离出一个`message.js` 消息模块，把和消息相关的路由配置写在这个模块里

![06084e8e727c6a526531b4e7f0c524cc.webp][]

同理，我们通过这种方式就可以把 `index.js` 路由配置文件，拆成了多个路由模块，这样我们就可以分模块来维护我们的路由配置，可读性也变高了。

## 3.将多个路由模块应用到路由配置文件里 ##

假设我们已经按功能拆分好了多个路由模块，目录结构如下

![0dab47efa496aa842d6b964510a0afa5.webp][]

得到了多个路由模块，最后我们可以利用**ES6的扩展运算符**，将多个模块整合到配置文件里 index.js

import Vue from 'vue'
    import Router from 'vue-router'
    import message from './message'
    Vue.use(Router)
    
    export default new Router({
      routes: [
        ...message,
      ]
    })

[https_www.jianshu.com_p_2833243987dd]: https://www.jianshu.com/p/2833243987dd
[4628af8c104c1745dbbf95ce775e2b81.webp]: /images/20221120/49ba875360904055b98b7a8400722225.png
[06084e8e727c6a526531b4e7f0c524cc.webp]: https://img-blog.csdnimg.cn/img_convert/06084e8e727c6a526531b4e7f0c524cc.webp
[0dab47efa496aa842d6b964510a0afa5.webp]: https://img-blog.csdnimg.cn/img_convert/0dab47efa496aa842d6b964510a0afa5.webp

发表评论取消回复

表情：

评论列表（有 0 条评论，226人围观）

还没有评论，来说两句吧...

相关阅读

相关第六篇：express路由拆分（模块化）

Node.js 是构建高性能、可扩展网络应用程序的运行时环境。它基于 Chrome V8 JavaScript 引擎，并采用事件驱动、非阻塞的 I/O 模型，使得它能够处...

心已赠人/ 2024年04月21日 08:11/ 0 赞/ 72 阅读

相关 Spring Boot 项目如何按模块进行拆分？

在了解SpringBoot项目拆分之前首先我们需要了解微服务架构什么是微服务？单个轻量级服务一般为一个单独微服务，微服务讲究的是专注某个功能的实现，比如登录系统只

不念不忘少年蓝@/ 2023年09月26日 15:57/ 0 赞/ 112 阅读

相关 SpringBoot 项目如何按模块进行拆分？

在了解SpringBoot项目拆分之前首先我们需要了解微服务架构什么是微服务？单个轻量级服务一般为一个单独微服务，微服务讲究的是专注某个功能的实现，比如登录系统只

你的名字/ 2023年09月24日 12:46/ 0 赞/ 134 阅读

相关 vue 路由按需 keep-alive

[https://juejin.im/post/5cdcbae9e51d454759351d84\comment][https_juejin.im_post_5cdcbae9e

偏执的太偏执、/ 2023年06月16日 07:53/ 0 赞/ 11 阅读

相关拆分vue的路由，便于阅读路由信息

如下是pc端的路由信息：`pc-router.js`，我的意图是将路由拆分成电脑端和手机端。方便日后设计手机界面的UI 注意点: export 返回的是一个数组

妖狐艹你老母/ 2023年01月01日 13:52/ 0 赞/ 195 阅读

相关 Vue路由按模块拆分配置

[https://www.jianshu.com/p/2833243987dd][https_www.jianshu.com_p_2833243987dd] 通常我们编写vu

╰半夏微凉°/ 2022年11月21日 01:26/ 0 赞/ 227 阅读

相关 VUE_vue动态路由，引入所有路由，vue路由模块化

require.context 主要使用require.context实现前端工程化动他引入文件 require.context(directory, useSubdir

蔚落/ 2022年11月04日 00:52/ 0 赞/ 294 阅读

相关 vue路由配置

1.首先在项目中安装vue-router 在terminal中输入 npm install vue-router --save 2.在mian.js中导入router

柔情只为你懂/ 2022年04月08日 08:39/ 0 赞/ 277 阅读

相关 Vue中管理路由-vue-router路由配置

在新建Vue Router时，Router的构建选项有routes、mode、base、linkActiveClass、linkExactActiveClass等等，这里只介绍

àì夳堔傛蜴生んèń/ 2022年02月24日 09:24/ 0 赞/ 1074 阅读

相关 vue路由分文件拆分管理

这里说的路由拆分指的是将路由的文件，按照模块拆分，这样方便路由的管理，更主要的是方便多人开发。具体要不要拆分，那就要视你的项目情况来定了，如果项目较小的话，也就一二十个路由，那

雨点打透心脏的1/2处/ 2021年09月19日 16:22/ 0 赞/ 394 阅读