一、普通路由配置

通常我们编写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. spring security四种实现方式

    spring security四种实现方式 spring(20) > 目录(?)[+] 最简单配置spring-securityxml实现1 实现UserDetailsService 实现动态过 ...

  2. day39-Spring 08-Spring的AOP：基于AspectJ的注解

    基于AspectJ的注解的开发要重点掌握. 这些表达式肯定要应用在我们的某些个增强上. 学习AspectJ也是两种形式:一种是XML,一种是注解.AspectJ的增强,就是那些通知的类型.Aspect ...

  3. node 写的简单爬虫（三）

    异步爬取数据 先引入 var async = require('async'); 然后同样上代码 var topicUrls = [];//存所有地址 http.get(url,function(re ...

  4. phpexcel使用说明3

    下面是总结的几个使用方法 include 'PHPExcel.php'; include 'PHPExcel/Writer/Excel2007.php'; //或者include 'PHPExcel/ ...

  5. LeetCode93 Restore IP Addresses

    题目: Given a string containing only digits, restore it by returning all possible valid IP address com ...

  6. UVa 623 大整数乘法

    UVa 623 计算N! n上限为1000自然不能直接算.所以可以开一个数组f[],f[]每一位存N!结果的6位.如果按进制来理解,就是10^6进制: 例如 11!=39916800=11*10!=1 ...

  7. nodeJs学习-07 express、body-parser；链式操作next

    express和body-parser   const express=require('express'); const bodyParser=require('body-parser'); var ...

  8. Myeclipse tomcat（jdk）安装

  9. 用select提取List元素自身序号

    var cs = currentCitys.Select((c, i) => new { id = c.CITY_ID, 序号 = (i + 1).ToString(), 城市类型 = c.IS ...

  10. 现代IM系统中的消息系统架构 - 模型篇

    前言 在架构篇中我们介绍了现代IM消息系统的架构,介绍了Timeline的抽象模型以及基于Timeline模型构建的一个支持『消息漫游』.『多端同步』和『消息检索』多种高级功能的消息系统的典型架构.架 ...