一、普通路由配置

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

二.通过拆分vue路由配置文件形成多个路由模块

比如说我们可以在 /src/router/ 目录下面新建一个 common.js和message.js文件
common.js 文件里面我们这么写，把公用的路由配置写在里面

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

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

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

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

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

这样拆分后就方便以后维护和更新了

vue 模块化 路由拆分配置的更多相关文章

  1. Vue结合路由配置递归实现菜单栏

    作者:小土豆biubiubiu 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/58c61b4361ff4b005d9e8 ...

  2. 优雅的写好Vue项目代码 — 路由拆分、Vuex模块拆分、element按需加载

    目录 路由的拆分 VUEX模块拆分 Element UI库按需加载的优雅写法 路由的拆分 项目较大路由较多时,路由拆分是一个不错的代码优化方案,按不同业务分为多个模块,结构清晰便于统一管理. requ ...

  3. Vue-Router路由 Vue-CLI脚手架和模块化开发 之 路由常用配置与路由嵌套

    vue-router路由常用配置 1.mode:配置路由模式,默认为hash,由于URL很丑,可以修改为history,但是需要服务端的支持: 以上一篇的博文为实例: 初始时url的显示: 使用mod ...

  4. vue路由的配置

    一.准备工作 1安装vue-cli  npm install vue-cli -g 2检查是否安装成功 vue -V(大写V) 3初始化一个新的项目 vue init  webpack vue-dem ...

  5. vue+element-ui路由配置相关

    vue+element-ui路由配置相关 转自:http://www.cnblogs.com/MonaSong/p/6703804.html vue-router2中说明了,子路由前面可以不加'/', ...

  6. vue的路由配置

    路由,其实就是指向的意思,当我点击页面上的home按钮时,页面中就要显示home的内容,如果点击页面上的about 按钮,页面中就要显示about 的内容.Home按钮 => home 内容, ...

  7. vue - 详细路由配置

    1. 路由可配置多个 2. 路由包含嵌套子路由 3. 路由可以别名 4. 路由单独钩子 5. vue2.6.0(可以直接匹配大小写) export default new Router({ mode: ...

  8. Vue history路由模式 apache配置上线

    1. 首先在vue项下的router.js 文件配置 mode为history模式,并且设置好对应的base选项 说明:base配置为你当前项目实际上线时所在的目录文件夹, 我这就是放在站点的根目录下 ...

  9. 基于vue模块化开发后台系统——构建项目

    文章目录如下:项目效果预览地址项目开源代码基于vue模块化开发后台系统--准备工作基于vue模块化开发后台系统--构建项目基于vue模块化开发后台系统--权限控制 前言 在熟悉上一篇说到准备工具之后, ...

随机推荐

  1. Python接口自动化（二）接口开发

    django 配置开发环境 相关命令 python manage.py runserver 127.0.0.1:8000在指定的地址和端口启动服务 python manage.py startapp ...

  2. Django中blank和NULL

    当我们在django中添加一个数据库字段时,我们通常会写models.CharField(max_length = 100,null = True,blank = True).用ForeignKey, ...

  3. #define 和常量 const 的区别

    const 后的常量,程序对其中只能读不能修改. #include <iostream> using namespace std; int main() { const double pi ...

  4. C#文件读写（txt 简单方式）

    1.文件写入 // 路径,写入内容 System.IO.File.WriteAllText(@".\File.txt", string.Empty); 可更换相应的方法 2.文件读 ...

  5. Linux 下的mysql+centos7+主从复制

    mysql+centos7+主从复制   MYSQL(mariadb) MariaDB数据库管理系统是MySQL的一个分支,主要由开源社区在维护,采用GPL授权许可.开发这个分支的原因之一是:甲骨文公 ...

  6. 2018-12-24-win10-uwp-求两个矩形相连的几何

    title author date CreateTime categories win10 uwp 求两个矩形相连的几何 lindexi 2018-12-24 20:51:49 +0800 2018- ...

  7. oracle HEXTORAW(c1)

    [功能]将一个十六进制构成的字符串转换为二进制 [参数]c1,十六进制的字符串 [返回]字符串 [示例] select HEXTORAW('A123')  from dual;

  8. QT 建立信号和槽的联系（事件处理）

    Qt中事件处理机制叫做“信号”和“槽”signal &slot. 其模型为: 对象a中有一个信号signal:XXX(代表一个事件) 对象b中有一个槽slot:YYY(事件处理函数) 用con ...

  9. H3C TCP连接的建立

  10. H3C 虚拟模板方式配置PPP MP