一、普通路由配置

通常我们编写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. R语言均值,中位数和模式

    R语言均值,中位数和模式 在R统计分析是通过用许多内置函数来执行的. 大多数这些函数是R基本包的一部分.这些函数需要R向量作为输入参数并给出结果. 我们正在讨论本章中的函数是平均数,中位数和模式. 平 ...

  2. JMeter 参数意义

    样本数目:运行时得到的取样器响应结果个数 最新样本:最近一个取样器结果的响应时间 平均:所有取样器结果的响应时间平均值 偏离:所有取样器结果的响应时间标准差 吞吐量:每分钟响应的取样器结果个数 中值: ...

  3. spring - constructor-arg的常规用法

     1.使用构造子注入时,则使用constructor-arg子标签,来指定构造函数的参数.    <bean id="provider" class="com.ap ...

  4. 纯CSS3实现iOS7扁平化图标

    在线演示 本地下载

  5. 洛谷2591BZOJ2298 problem a题解

    题目连接 bz链接 我们发现,如果一个人有ai个分数比他高的人,有bi个分数比他低的人 那么按照分数排序后,区间[ai+1,n-bi]中的人分数便是相同的 这样就将一个人转化为一个区间 也许有很多人的 ...

  6. 阿里云发布SaaS加速器，用宜搭，像搭积木一样搭应用

    宜搭让不会编码的人也能快速搭建SaaS应用,大幅提升研发效率. (图:阿里云智能产品管理部总经理马劲在2019阿里云峰会·北京现场进行宜搭应用搭建演示. ) 3月21日,在2019阿里云峰会·北京上, ...

  7. 简单利用XSS获取Cookie信息实例演示

    简单利用XSS获取Cookie信息实例演示   首先要找到一个有XXS的站,这里就不整什么大站了,谷歌一下inurl:'Product.asp?BigClassName',搜出来的命中率也比较高.随便 ...

  8. python 函数的语法规则

  9. [mysql]MySQL Daemon failed to start 2016-08-14 21:27 1121人阅读 评论(18) 收藏

    前两天我们发现发布好的网站不可以进行注册,登陆这些活动,但是访问页面是正常的.于是开始对问题进行排查,首先我们重启了jenkins,但是每次重启都有错误,于是我们只能重启服务器,重启服务器需要重新启动 ...

  10. 机房收费系统之【只允许一个MDI窗体 错误：426】 标签： vb 2014-08-15 10:36 1149人阅读 评论(23)

    机房收费系统的主窗体是MDI窗体,为了在这个窗体上添加控件,所以我们在窗体上添加了picture控件,在MDI窗体中,子窗体实际上位于MDIClient里,即子窗体的父窗体就是MDIClient,而放 ...