项目需求场景:

   在开发项目过程中,在项目过于庞大,路由信息非常多的情况下,如果将路由配置信息都放在一个文件里面,那么这个JS是不方便维护的,

那么,这个时候需要我们把这个庞大的路由文件,根据项目功能分类,拆分为几个不同的路由文件。

实现步骤:

  1.不管你拆分为几个,最后都是要整合到一个js文件里面的,

  2.比如你建立了两个文件夹,分别为router,router2,里面都有一个index.js,其中router为主文件夹,在里面的index.js中引入外部配置的路由信息

  3.在router2中的index.js中配置路由信息,如图

  

  4.在主文件router/index.js中引入进来,如图

  

  这样就将所有的路由配置都整合完毕了,最后只需要在入口文件main.js中引入这个router就可以了

Vue 项目中对路由文件进行拆分(解构的方法)的更多相关文章

  1. 如何在Vue项目中给路由跳转加上进度条

    1.前言 在平常浏览网页时,我们会注意到在有的网站中,当点击页面中的链接进行路由跳转时,页面顶部会有一个进度条,用来标示页面跳转的进度(如下图所示).虽然实际用处不大,但是对用户来说,有个进度条会大大 ...

  2. Vue项目中出现Loading chunk {n} failed问题的解决方法

    最近有个Vue项目中会偶尔出现Loading chunk {n} failed的报错,报错来自于webpack进行code spilt之后某些bundle文件lazy loading失败.但是这个问题 ...

  3. vue-cli构建的vue项目中引入stylus文件

    在写基于vue-cli的vue项目时,如果直接引入styl文件,会报错,需要安装stylus.stylus-loader依赖以及别名配置. 1.下载安装stylus.stylus-loader,推荐使 ...

  4. vue项目中的路由守卫

    路由守卫的意义就相当于一个保安一样,作用很大,在实际的项目中运用也是不少,也就是当客户在登陆自己账号的时候,有可能存在客户有啥事的时候,自己后台或者pc的关闭全部浏览器,没有点击退出登录,或者在退出登 ...

  5. vue项目中导出Excel文件功能的前端代码实现

    在项目中遇到了两种不同情况, 1.get请求导出文件,实现起来相对简单 // 导出数据 exportData() { window.location.href = `/oes-content-mana ...

  6. vue项目中操作PDF文件

    以前从来没接触过前端要求显示PDF文件,一时之间有点懵逼,不知从哪下手啊... 无奈之下,去找度娘,方法还不少,iframe  embed  object这些标签就可以, 可是拿过来做个demo一试, ...

  7. vue项目中router路由配置

    介绍 路由:控制组件之间的跳转,不会实现请求.不用页面刷新,直接跳转-切换组件>>> 安装 本地环境安装路由插件vue-router:    cnpm install vue-rou ...

  8. Vue项目中引入外部文件(css、js、less)

    例子中css文件采用bootstrap.css,js文件采用jQuery,less文件用less.less(自定义文件) 步骤一:安装webpack cnpm install webpack -g 步 ...

  9. 在vue项目中的js文件里使用vue实例

    参考的网址:https://blog.csdn.net/weixin_34353714/article/details/86958742 不为其他,就为了记录一下,方便以后查看: 第一种方法: 1.首 ...

随机推荐

  1. VIM纵向编辑【转】

    原文:https://www.ibm.com/developerworks/cn/linux/l-cn-vimcolumn/index.html Vim 的纵向编辑模式启动方便,使用灵活,还可以配合上 ...

  2. 编写并提取简易 ShellCode

    ShellCode 通常是指一个原始的可执行代码的有效载荷,ShellCode 这个名字来源于攻击者通常会使用这段代码来获得被攻陷系统上的交互 Shell 的访问权限,而现在通常用于描述一段自包含的独 ...

  3. 训练技巧详解【含有部分代码】Bag of Tricks for Image Classification with Convolutional Neural Networks

    训练技巧详解[含有部分代码]Bag of Tricks for Image Classification with Convolutional Neural Networks 置顶 2018-12-1 ...

  4. 怎样理解document的快捷方式属性

    所谓 "快捷方式属性" , 也就是说它们不是必须的, 只是在操作dom时可以更为方便地获取. 主要有下面8个: 1. 获取当前文档所属的window对象: document.def ...

  5. springMVC接受json类型数据

    springMVC接受json格式的数据很简单 使用@RequestBody 注解,标识从请求的body中取值 服务端示例代码 @RequestMapping(value = "/t4&qu ...

  6. dotnet跨平台 - 使用Nginx+Docker Compose运行.NETCore项目

    参考文档: https://docs.docker.com/install/linux/docker-ce/centos/ http://www.dockerinfo.net/document htt ...

  7. VBA精彩代码分享-1

    今天下班前分享一下之前在网上搜到的两段好用的VBA代码,貌似都来自国外,觉得挺好,模仿不来. 第一段的功能是修改VBA控件中的文本框控件,使其右键可以选择粘贴.复制.剪切等: Option Expli ...

  8. ECMAScript中的原型继承

    //ECMAScript中的原型继承//ECMAScript中的继承主要是依靠原型链实现的.(关于原型链的介绍,详见<高三>6.3.1章节 P162) //本文示例主要为了说明SubTyp ...

  9. TimeUtil 工具类

    /** * TODO * * @auther xh * @date 6/11/19 3:32 PM */ public class TimeUtil { public static final Str ...

  10. 第二章、前端之css

    目录 第二章.前端之css 一.css介绍 二.css语法 三.css几种引入方式 四.css选择器 五.css属性相关 六.css盒子模型 第二章.前端之css 一.css介绍 css(Cascad ...