在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. 浅谈jmeter请求参数获取的方式

    一.传统的web端请求参数我们在浏览器url栏看到传递的参数是什么,比如百度: 1.我们假如百度有一个这样的地址: https://www.baidu.com/s?wd=jmeter&name ...

  2. python-requests数据驱动延伸

    在 python-requests模块的讲解和应用 基础上进行数据驱动的延伸 task_01_requests.py #-*- coding:utf-8 -*- #task_01_requests.p ...

  3. (转)微信小程序开发—弹出框

    原文地址 <span style="font-family:Comic Sans MS;font-size:18px;color:#333333;"><view ...

  4. android TextView 例子代码(文字中划线、文字下划线)

    XML: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android ...

  5. bayes公式 - 再从零开始理解

    bayes公式与机器学习 - 再从零开始理解 从本科时候(大约9年前)刚接触Bayes公式,只知道P(A|B)×P(B) = P(AB) = P(B|A)×P(A) 到硕士期间,机器学习课上对P(B| ...

  6. 转载:明明白白VC LIB和DLL的使用

    转载来自:http://dpinglee.blog.163.com/blog/static/1440977532016316813889/ 1.加载lib/头文件 分两种方法: (1)适用于当前项目 ...

  7. kubernetes组件架构

    kubernetes,简称K8s,是用8代替8个字符“ubernete”而成的缩写.是一个开源的,用于管理云平台中多个主机上的容器化的应用,Kubernetes的目标是让部署容器化的应用简单并且高效( ...

  8. Image.Url 无法使用 Server.MapPath(使用后无论如何也不显示)

    Image.Url 无法使用 Server.MapPath(使用后无论如何也不显示)

  9. node.js 发送邮件

    var nodemailer = require('nodemailer'); var smtpTransport = require('nodemailer-smtp-transport'); // ...

  10. PHP5 的五种常用模式

    PHP5 的五种常用模式. 工厂模式 最初在设计模式 一书中,许多设计模式都鼓励使用松散耦合.要理解这个概念,让我们最好谈一下许多开发人员从事大型系统的艰苦历程.在更改一个代码片段时,就会发生问题,系 ...