vue 模块化 路由拆分配置
一、普通路由配置
通常我们编写vue路由配置都会写在 /src/router/index.js
这个文件下。
但是,随着我们的vue项目变得越来越大后,路由也随之变得越来越多,出现的问题就是我们所有的路由都定义在一个文件下,代码会变得可读性差,难以维护。 如下图所示。
二.通过拆分vue路由配置文件形成多个路由模块
比如说我们可以在 /src/router/
目录下面新建一个 common.js
和message.js
文件common.js
文件里面我们这么写,把公用的路由配置写在里面
然后我们再抽离出一个 message.js
消息模块,把和消息相关的路由配置写在这个模块里
同理,我们通过这种方式就可以把 index.js
路由配置文件,拆成了多个路由模块,这样我们就可以分模块来维护我们的路由配置,可读性也变高了。
三.将多个路由模块应用到路由配置文件里
假设我们已经按功能拆分好了多个路由模块,目录结构如下
得到了多个路由模块,最后我们可以利用ES6的扩展运算符,将多个模块整合到配置文件里
这样拆分后就方便以后维护和更新了
vue 模块化 路由拆分配置的更多相关文章
- Vue结合路由配置递归实现菜单栏
作者:小土豆biubiubiu 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/58c61b4361ff4b005d9e8 ...
- 优雅的写好Vue项目代码 — 路由拆分、Vuex模块拆分、element按需加载
目录 路由的拆分 VUEX模块拆分 Element UI库按需加载的优雅写法 路由的拆分 项目较大路由较多时,路由拆分是一个不错的代码优化方案,按不同业务分为多个模块,结构清晰便于统一管理. requ ...
- Vue-Router路由 Vue-CLI脚手架和模块化开发 之 路由常用配置与路由嵌套
vue-router路由常用配置 1.mode:配置路由模式,默认为hash,由于URL很丑,可以修改为history,但是需要服务端的支持: 以上一篇的博文为实例: 初始时url的显示: 使用mod ...
- vue路由的配置
一.准备工作 1安装vue-cli npm install vue-cli -g 2检查是否安装成功 vue -V(大写V) 3初始化一个新的项目 vue init webpack vue-dem ...
- vue+element-ui路由配置相关
vue+element-ui路由配置相关 转自:http://www.cnblogs.com/MonaSong/p/6703804.html vue-router2中说明了,子路由前面可以不加'/', ...
- vue的路由配置
路由,其实就是指向的意思,当我点击页面上的home按钮时,页面中就要显示home的内容,如果点击页面上的about 按钮,页面中就要显示about 的内容.Home按钮 => home 内容, ...
- vue - 详细路由配置
1. 路由可配置多个 2. 路由包含嵌套子路由 3. 路由可以别名 4. 路由单独钩子 5. vue2.6.0(可以直接匹配大小写) export default new Router({ mode: ...
- Vue history路由模式 apache配置上线
1. 首先在vue项下的router.js 文件配置 mode为history模式,并且设置好对应的base选项 说明:base配置为你当前项目实际上线时所在的目录文件夹, 我这就是放在站点的根目录下 ...
- 基于vue模块化开发后台系统——构建项目
文章目录如下:项目效果预览地址项目开源代码基于vue模块化开发后台系统--准备工作基于vue模块化开发后台系统--构建项目基于vue模块化开发后台系统--权限控制 前言 在熟悉上一篇说到准备工具之后, ...
随机推荐
- R语言均值,中位数和模式
R语言均值,中位数和模式 在R统计分析是通过用许多内置函数来执行的. 大多数这些函数是R基本包的一部分.这些函数需要R向量作为输入参数并给出结果. 我们正在讨论本章中的函数是平均数,中位数和模式. 平 ...
- JMeter 参数意义
样本数目:运行时得到的取样器响应结果个数 最新样本:最近一个取样器结果的响应时间 平均:所有取样器结果的响应时间平均值 偏离:所有取样器结果的响应时间标准差 吞吐量:每分钟响应的取样器结果个数 中值: ...
- spring - constructor-arg的常规用法
1.使用构造子注入时,则使用constructor-arg子标签,来指定构造函数的参数. <bean id="provider" class="com.ap ...
- 纯CSS3实现iOS7扁平化图标
在线演示 本地下载
- 洛谷2591BZOJ2298 problem a题解
题目连接 bz链接 我们发现,如果一个人有ai个分数比他高的人,有bi个分数比他低的人 那么按照分数排序后,区间[ai+1,n-bi]中的人分数便是相同的 这样就将一个人转化为一个区间 也许有很多人的 ...
- 阿里云发布SaaS加速器,用宜搭,像搭积木一样搭应用
宜搭让不会编码的人也能快速搭建SaaS应用,大幅提升研发效率. (图:阿里云智能产品管理部总经理马劲在2019阿里云峰会·北京现场进行宜搭应用搭建演示. ) 3月21日,在2019阿里云峰会·北京上, ...
- 简单利用XSS获取Cookie信息实例演示
简单利用XSS获取Cookie信息实例演示 首先要找到一个有XXS的站,这里就不整什么大站了,谷歌一下inurl:'Product.asp?BigClassName',搜出来的命中率也比较高.随便 ...
- python 函数的语法规则
- [mysql]MySQL Daemon failed to start 2016-08-14 21:27 1121人阅读 评论(18) 收藏
前两天我们发现发布好的网站不可以进行注册,登陆这些活动,但是访问页面是正常的.于是开始对问题进行排查,首先我们重启了jenkins,但是每次重启都有错误,于是我们只能重启服务器,重启服务器需要重新启动 ...
- 机房收费系统之【只允许一个MDI窗体 错误:426】 标签: vb 2014-08-15 10:36 1149人阅读 评论(23)
机房收费系统的主窗体是MDI窗体,为了在这个窗体上添加控件,所以我们在窗体上添加了picture控件,在MDI窗体中,子窗体实际上位于MDIClient里,即子窗体的父窗体就是MDIClient,而放 ...