我的编程空间,编程开发者的网络收藏夹
学习永远不晚

VueJs中怎么实现异步动态加载块

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

VueJs中怎么实现异步动态加载块

本篇文章给大家分享的是有关VueJs中怎么实现异步动态加载块,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

首先定义组件为异步加载

define(['jquery','vue'],function($,Vue){ 
  Vue.component('comp1',function(resolve){ 
    require(['component/comp1'],resolve); 
  }); 
  Vue.component('comp2',function(resolve){ 
    require(['component/comp2'],resolve); 
  }); 
  var b = new Vue({ 
    el:"#app", 
    data:{ 
      currentView:'comp1' 
    }, 
    methods:{ 
      toggleView:function(){ 
        console.log(this.currentView); 
        this.currentView = this.currentView=='comp1'?'comp2':'comp1'; 
      } 
    } 
  }); 
})

具体可以参考vuejs的异步组件和动态组件。然后是html里面的代码

<div id="app"> 
    <keep-alive><!-- 使用keep-alive可以让动态被切出去的组件继续保存在内存中(只是隐藏看不到),却回来之后会继续之前的状态和数据 --> 
    <component v-bind:is="currentView"></component> 
    </keep-alive> 
    <button type="button" v-on:click="toggleView">切换view</button> 
  </div>

这种结构的好处是,页面初始化加载的时候只会加载需要的那个组件相关的内容,没切换到的那个组件不加载,使页面加载的速度加快。同时,每个组件加载过一次之后切换出再切回来不会重复加载相关内容和重复执行渲染

以上就是VueJs中怎么实现异步动态加载块,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注编程网行业资讯频道。

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

VueJs中怎么实现异步动态加载块

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

Vue如何实现异步动态加载块

本篇内容介绍了“Vue如何实现异步动态加载块”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!首先定义组件为异步加载define([jquery
2023-07-04

Android 中动态加载.jar的实现步骤

首先第一个是 jar 文件的制作,Java 里面直接把 .class 文件打包到 .jar 文件里面就可以了,但是 Android 的 Dalvik VM 是不认 Java 的 byte code 的,所以不能直接这么打包,而要用 dx 工
2022-06-06

vue3.0+vite2实现动态异步组件懒加载的方法

这篇文章主要介绍“vue3.0+vite2实现动态异步组件懒加载的方法”,在日常操作中,相信很多人在vue3.0+vite2实现动态异步组件懒加载的方法问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue3.
2023-06-20

winform异步加载数据怎么实现

在WinForm中实现异步加载数据可以使用BackgroundWorker组件或者使用Task类来实现。方法一:使用BackgroundWorker组件1. 在窗体中添加一个BackgroundWorker组件,并设置其WorkerRepo
2023-10-10

权限管理模块中动态加载Vue组件怎么实现

本篇内容介绍了“权限管理模块中动态加载Vue组件怎么实现”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!登录状态保存当用户登录成功之后,需要将
2023-06-19

python中动态加载模块和类方法实现

python中动态加载模块和类方法实现测试代码 文件名: mytest.py 具体代码如下: 注意:模块名,类名,方法名都是变量。 #coding=UTF-8class TestClass: def sub(self,a,b):
2023-01-31

springboot动态加载类怎么实现

要实现Spring Boot动态加载类,可以使用以下步骤:创建一个ClassLoader对象,用于动态加载类。可以使用URLClassLoader类来实现,可以指定类路径。使用ClassLoader对象的`loadClass()`方法加载需
2023-10-25

Android实现Listview异步加载网络图片并动态更新的方法

本文实例讲述了Android实现Listview异步加载网络图片并动态更新的方法。分享给大家供大家参考,具体如下: 应用实例:解析后台返回的数据,把每条都显示在ListView中,包括活动图片、店名、活动详情、地址、电话和距离等。 在布局文
2022-06-06

Android中怎么利用Xfermode实现动态文字加载动画

这篇文章将为大家详细讲解有关Android中怎么利用Xfermode实现动态文字加载动画,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。第一步:我们要熟悉一下这个图16个图形结果,其实现在有1
2023-05-30

java中怎么实现动态载入

java中怎么实现动态载入,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。java动态载入class的两种方式:implicit隐式,即利用实例化才载入的特性来java动态载
2023-06-17

C#中怎么加载动态库

这期内容当中小编将会给大家带来有关C#中怎么加载动态库,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。C#语言有很多值得学习的地方,这里我们主要介绍C#实现加载动态库,包括介绍将 C 或 C++ 函数封装成
2023-06-17

编程热搜

目录