vue路由懒加载和组件懒加载

vue路由懒加载和组件懒加载其实原理一样
常用的懒加载方式有两种:即使用vue异步组件 和 ES中的import

路由懒加载
ES 提出的import方法,
方法如下:const HelloWorld = ()=>import('需要加载的模块地址')
(不加 { } ,表示直接return)
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const HelloWorld = ()=>import("@/components/HelloWorld")
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component:HelloWorld
    }
  ]
})

组件懒加载
<template>
  <div class="hello">
  <One-com></One-com>
  1111
  </div>
</template>

<script>
const One = ()=>import("./one");
export default {
  components:{
    "One-com":One
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/407773.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

UML:类图复习-鸡生蛋,蛋生鸡

这是前一阵《高级软件工程》课堂上&#xff0c;老师随堂出的一道讨论题&#xff0c;随手贴在这里&#xff1a; ps: 今天是520&#xff0c;正好聊一些OoXx&#xff0c;关于爱的扯淡话题&#xff1a;&#xff09; 题目&#xff1a;“鸡生蛋&#xff0c;蛋孵鸡”&#xff0c;世间万…

[转] 硬盘工具DiskMan使用图解

① 图解DM硬盘分区的基本使用(图) 对于一个新硬盘来说&#xff0c;首先必须进行的工作就是进行分区&#xff0c;只有这样才能正常使用&#xff0c;同时分区也是为方便我们进行资料的管理。DOS中的Fdisk是一个很小巧的工具&#xff0c;但是在使用上有些麻烦&#xff0c;特别是…

Linux下检测网络状态是否正常

// Linux下检测网络状态是否正常#include <sys/types.h>#include <string.h>#include <stdlib.h>#include <sys/ioctl.h>#include <stdio.h>#include <errno.h>#include <net/if.h>struct ethtool_value {__uint32_t cmd;__uin…

websocket阮一峰博客地址教学

http://www.ruanyifeng.com/blog/2017/05/websocket.html WebSocket 教程

asp.net中MaintainScrollPositionOnPostback属性的使用

可能我们会经常遇到这种情况&#xff0c;当页面内容比较多的时候&#xff0c;当用户执行操作执行一次页面回送后&#xff0c;页面又重新从顶端开始显示&#xff0c;用户不得不重新拖动滚动条回到先前的位置&#xff0c;这会给用户带来很不友好的体验。即时使用updatepanel也会有…

Linux下显示当前目录下的全部目录或文件

Linux终端中显示当前目录下的所有目录和文件&#xff08;不包含隐藏文件&#xff09;&#xff1a; [rootlocalhost ~]# ll     // 显示所有目录和文件总用量 124-rw------- 1 root root 2382 5月 6 07:28 anaconda-ks.cfgdrwxr-xr-x 2 root root 4096 6月 25 16:45 …

TradingView用于画K线图表

附上两个文档链接&#xff1a; 官方文档链接&#xff1a;https://github.com/tradingview/charting_library/wiki&#xff08;需向官方申请&#xff09; 中文文档链接&#xff1a;https://zlq4863947.gitbooks.io/tradingview/&#xff08;转&#xff09;

[心得]Ubuntu無法ssh登入

裝好ssh後&#xff0c;發覺無法用root登入&#xff0c;可是sshd_config接正確。 後來發現原因在於&#xff0c;Ubuntu沒有root帳號&#xff0c;但是可以透過sudo -s拿到root權限。 su root 密碼怎樣打也行不通&#xff0c;不過sudo -s卻可以。 總之就是要用sudo -s 後 執行pass…

Flex布局教程篇

Flex布局是什么&#xff1f; Flex是Flexible Box的缩写&#xff0c;意为”弹性布局”&#xff0c;用来为盒状模型提供最大的灵活性。 任何一个容器只要添加”display:flex”都可以指定为Flex布局。行内元素添加”display:inline-flex”便可以指定为使用Flex布局。 注意:设置…

JavaScript使用技巧精萃

(一).确认删除用法:1. BtnDel.Attributes.Add("onclick","return confirm(""确认删除?"")");2. linktempDelete.Attributes["onclick"]"javascript:return confirm(""确认删除?"");";3. pr…

求一个数包含多少个1

计算一个unsigned int数包含多少个1&#xff0c;源码&#xff1a;#include <iostream>using namespace std;// 计算一个unsigned int数含多少个1int bitCount1(unsigned int word){int n 0;int density[16] {0, 1, 1, 2, 1, 2, 2, 3, 1, 2, 2, 3, 2, 3, 3, 4}; // 计算…

在DrawingVisual上绘制圆形的进度条,类似于IOS系统风格。

1.说明&#xff1a;在WPF中&#xff0c;文件下载时需要显示下载进度&#xff0c;由于系统自带的条型进度条比较占用空间&#xff0c;改用圆形的进度条,需要在DrawingVisual上呈现。 运行的效果如图&#xff1a; private Point GetPointOnCir(Point CenterPoint, double r, doub…

Discuz论坛架设从零起步之四

前期工作&#xff1a; 按Discuz论坛架设从零起步之一&#xff08;[url]http://waringid.blog.51cto.com/65148/50906[/url]&#xff09; Discuz论坛架设从零起步之二&#xff08;[url]http://waringid.blog.51cto.com/65148/50940[/url]&#xff09; Discuz论坛架设从零起步之三…

web app小程序各种客服窗口插件

http://qiyukf.com/docs/guide/web/# 网易七鱼在线客服 <html><head><title>在线客服</title><meta charset"utf-8"/></head><body><script>(function (w, d, n, a, j) {w[n] w[n] || function () {return (w[n].…

Javascript中的类实现

Javascript本身并不支持面向对象&#xff0c;它没有访问控制符&#xff0c;它没有定义类的关键字class&#xff0c;它没有支持继承的extend或冒号&#xff0c;它也没有用来支持虚函数的virtual&#xff0c;不过&#xff0c;Javascript是一门灵活的语言&#xff0c;下面我们就看…

CSS Grid布局(1)

1.网格容器:通过display属性设置属性值为grid或inline-grid可以创建一个网格容器。网格容器中的所有子元素就会自动变成网格项目&#xff08;grid item&#xff09; 1.1网格项目默认放在行中&#xff0c;并且跨网格容器的全宽 2.显示网格:使用grid-template-columns和grid-tem…