在vue-cli脚手架中router文件夹中有index.js文件,里面的内容是

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from './HelloWorld'
//import HelloWorld from '@/components/HelloWorld' Vue.use(Router) export default new Router({
routes: [].concat(HelloWorld)
}) 这里引入的HelloWorld组件不是向以前那么配置是单独在一个js文件中其中内容是,这里的配置都和原来的路径一致,只不过换了一种写法
const HelloWorld = (resolve) => {
import('../components/HelloWorld').then((module) => {
resolve(module)
})
}//通过箭头函数将组件HelloWorld引入最后输出该路由路径
export default
[{
path:'/',
name:"hello",
component:HelloWorld
}]
这样index.js 中routes:采用数组连接concat将HelloWorl.js配置好的路由路径放在空数组中,如果还有其他的路径也采用这个方法,子路由也是和以前的方式配置只要export default配置好的路由数组在
index.js 数组连接concat就可以了。

vue router 懒加载实现的更多相关文章

  1. Vue图片懒加载插件

    图片懒加载是一个很常用的功能,特别是一些电商平台,这对性能优化至关重要.今天就用vue来实现一个图片懒加载的插件. 这篇博客采用"三步走"战略--Vue.use().Vue.dir ...

  2. vue组件懒加载

    vue2组件懒加载浅析 一. 什么是懒加载 懒加载也叫延迟加载,即在需要的时候进行加载,随用随载. 二.为什么需要懒加载 在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异常的大, ...

  3. 前端性能优化成神之路--vue组件懒加载(Vue Lazy Component )

    ---恢复内容开始--- 使用组件懒加载的原因 我们先来看看这样的一个页面,页面由大量模块组成,所有模块是同时进行加载,模块中图片内容较多,每个模块的依赖资源较多(包括js文件.接口文件.css文件等 ...

  4. vue实现懒加载的几种方法

    vue实现惰性加载是基于: 1.ES6的异步机制 components: { comp: (resolve, reject) => {} } 2. webpack的代码分割功能 require. ...

  5. vue组件懒加载(Load On Demand)

    在Web应用程序中,系统的瓶颈常在于系统的响应速度.如果系统响应速度过慢,用户就会出现埋怨情绪,系统的价值也因此会大打折扣.因此,提高系统响应速度,是非常重要的. 懒加载(Load On Demand ...

  6. 【巷子】---vue路由懒加载---【vue】

    一.懒加载 也叫延迟加载或者按需加载,即在需要的时候进行加载,   二.为什么要使用懒加载 像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要 ...

  7. vue路由懒加载及组件懒加载

    一.为什么要使用路由懒加载 为给客户更好的客户体验,首屏组件加载速度更快一些,解决白屏问题. 二.定义 懒加载简单来说就是延迟加载或按需加载,即在需要的时候的时候进行加载. 三.使用 常用的懒加载方式 ...

  8. vue 路由懒加载 resolve vue-router配置

    使用方法 component:resolve => require(['@/pages/About'],resolve) //"@"相当于".." 懒加载 ...

  9. Vue 路由懒加载, VueRouter一步完成Vue的路由懒加载 一行代码搞定懒加载

    Vue Router路由配置中的component里面配置即可 1 // 路由懒加载的方式加载组件 2 3 component: () => import('@/views/Detail'), ...

随机推荐

  1. Docker 核心技术与实现原理

    提到虚拟化技术,我们首先想到的一定是 Docker,经过四年的快速发展 Docker 已经成为了很多公司的标配,也不再是一个只能在开发阶段使用的玩具了.作为在生产环境中广泛应用的产品,Docker 有 ...

  2. CSS3帧动画

    在前面的文章中也有介绍过css3动画的内容,可见<关于transition和animation>和<webkitAnimationEnd动画事件>,今天又要唠叨一下这个东西了, ...

  3. IDEA搭建Spring框架环境

      一.spring 框架概念 spring 是众多开源 java 项目中的一员,基于分层的 javaEE 应用一站式轻量 级开源框架,主要核心是 Ioc(控制反转/依赖注入) 与 Aop(面向切面) ...

  4. IntelliJ Idea设置Could not autowire. No beans of 'xxx' type found

    1.问题描述 在Idea的spring工程里,经常会遇到Could not autowire. No beans of ‘xxxx’ type found的错误提示.但程序的编译和运行都是没有问题的, ...

  5. python-设计模式:抽象类

    抽象类:用来分离主体框架和局部实现,或将共用和定制解藕.从抽象类继承必须实现所有层级未被实现的抽象方法(被装饰器abstractmethod装饰的方法),否则无法创建实例. 定义抽象类,必须继承ABC ...

  6. centos7-vmware克隆后的配置

    需要使用vmware克隆出多台服务器,验证集群功能. 所以采用全克隆的方式,生成多台虚拟机. 这里采用的是最小化安装的配置,桥接自动获取IP,其它配置可能不适合该指导. 修改网卡的MAC地址 网络配置 ...

  7. 查看mysql 表大小

    select round(sum(DATA_LENGTH / 1024 / 1024 ), 2) from `information_schema`.`tables` where table_sche ...

  8. Android 开发第二步——建立文件

    先以Hello World工程为样板 启动AVD 但在编程过程中遇到了非常棘手的问题 等待下一期完成

  9. leetcode1007

    public class Solution { public int MinDominoRotations(int[] A, int[] B) { var na = A.Length; var nb ...

  10. PLSQLDeveloper_免安装自带client

    PLSQLDeveloper_解压版 免安装并且自带有client客户端. 要安装解压附带的readme.txt进行配置. 一. 目录结构 D:\install\PLSQL |-- instantcl ...