项目需求场景：

　　　在开发项目过程中，在项目过于庞大，路由信息非常多的情况下，如果将路由配置信息都放在一个文件里面，那么这个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. （十四）mybatis 和 spring 整合

    目录 整合思想 整合步骤 整合之后原始 dao 开发 整合之后 Mapper 代理开发 总结 整合思想 让 spring 管理 sqlSessionFactory ,使用 单例模式 创建该对象 : 根 ...

  2. 宝塔面板liunx开启ssl域名后无法访问解决方法

    不打开宝塔面板的ssl会不安全,打开了就会提示ssl证书不能使用的错误 如下所示: 您的连接不是私密连接 攻击者可能会试图从 你的ip 窃取您的信息(例如:密码.通讯内容或信用卡信息).了解详情 NE ...

  3. 第一章 MIZ701 VIVADO 搭建SOC最小系统HelloWorld

      本章内容是MIZ701中的第五章,本来也是要过渡一下FPGA部分的,但是由于MIZ701没有单独提供PL部分的晶振时钟,时钟必须通过PS产生,所以本章内容作为Miz701的第一章内容.本章的目的是 ...

  4. 禅道工具的下载和使用（原地址：https://www.cnblogs.com/ydnice/p/5800256.html）

    下载地址:http://sourceforge.net/projects/zentao/files/8.2/ZenTaoPMS.8.2.stable.exe/download 1.解压ZenTaoPM ...

  5. Java生成随机数列表

    生成随机数列表 1.Java8以前 (1)Math.random private List<UserEntity> random1() { ArrayList<UserEntity& ...

  6. Python的.sort()方法和sorted（）比较总结

    1,.sort()方法 使用方式是:列表.sort(),作用是将原来的列表正序排序,所以它是对原来的列表进行的操作,不会产生一个新列表,例如: import random numList=[] pri ...

  7. 安卓开发之获取SD卡空间数据

    package com.lidaochen.getsdcardspace; import android.os.Environment; import android.support.v7.app.A ...

  8. CentOS如何安装MySQL8.0、创建用户并授权的详细步骤

    # 安装相关软件 yum install -y gcc gcc-c++ openssl openssl-devel ncurses ncurses-devel make cmake # 获取MySQL ...

  9. Saladict 沙拉查词

    Saladict 沙拉查词 鼠标中键呼出 整合了有道翻译.百度翻译.必应翻译.腾讯翻译君. Google 翻译和彩云小译等,自动发音,可配置词典. 说明文档:https://github.com/cr ...

  10. SpringCloud之Hystrix容错保护原理及配置

    1 什么是灾难性雪崩效应? 如下图的过程所示,灾难性雪崩形成原因就大致如此: 造成灾难性雪崩效应的原因,可以简单归结为下述三种: 服务提供者不可用.如:硬件故障.程序BUG.缓存击穿.并发请求量过大等 ...