一、普通路由配置

通常我们编写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. JDK源码解析string之二

    (28) public boolean startsWith(String prefix, int toffset) { char ta[] = value; int to = toffset; ch ...

  2. nodeJs学习-15 mysql中间件下载与使用、基本用法

    下载mysql中间件(客户端):cnpm install mysql 链接数据库.查询示例: const mysql=require('mysql'); //1.连接 //createConnecti ...

  3. eclipse Some projects cannot be imported because they already exist in the workspace

    archive file 档案文件 删除对应的文件即可

  4. oracle交互命令

    (1)说明:可以替代变量,而该变量在执行时,需要用户输入. sql>select * from emp where job=’&job’; (2)edit  说明:该命令可以编辑指定的s ...

  5. shared_ptr的线程安全性

    一: All member functions (including copy constructor and copy assignment) can be called by multiple t ...

  6. 块级元素及内联元素对margin、padding的态度

    1.块级元素 margin:跟标准一样,设置该块级元素边框与同级兄弟元素或者父元素的距离,俗称外边距. padding:先延伸边框(也就是优先改变元素尺寸而不动元素中内容的位置),当边框碰到父元素的边 ...

  7. hdu 1003 hdu 1231 最大连续子序列【dp】

    HDU1003 HDU1231 题意自明.可能是真的进步了点,记得刚开始研究这个问题时还想了好长时间,hdu 1231还手推了很长时间,今天重新写干净利落就AC了. #include<iostr ...

  8. HZOJ Weed

    作者的题解: 如果一段操作被执行,会对整个栈有什么影响呢? 把栈弹出若干个数后再插入若干个数. 线段树: 每个点纪录三个值:执行完这段操作后会删多少个,再插多少个,插的和一共是多少. 合并值时再用一个 ...

  9. iphone 内存检测工具

    http://latest.docs.nimbuskit.info/NimbusOverview.html Nimbus Overview Sub-Modules Sensors Overview L ...

  10. selenium 自动化点击页面

    #!/usr/bin/env python# -*- coding:utf-8 -*-from selenium import webdriverfrom selenium.webdriver.com ...