vue路由懒加载的实现方式_vue路由懒加载实现原理

vue路由懒加载的实现方式_vue路由懒加载实现原理1、当一个vue项目很大的时候,对于一些“暂时”用不到的组件,我们可以不进行加载,等到用到次组件时再加载。这样可以优化spa应用首次加载白屏情况,也给用户更好的体验。这样就是vue路由懒加载。2、常用的懒加载方式有两种:即使用ES中的import和vue异步组件2.1未使用懒加载importHelloWorldfrom’@/components/HelloWorld…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

1、当一个vue项目很大的时候,对于一些“暂时”用不到的组件,我们可以不进行加载,等到用到次组件时再加载。这样可以优化spa应用首次加载白屏情况,也给用户更好的体验。这样就是vue路由懒加载。

2、常用的懒加载方式有两种:即使用 ES中的import  和 vue异步组件 

2.1 未使用懒加载

import HelloWorld from '@/components/HelloWorld'

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component:HelloWorld
    }
  ]
})

2.2  使用ES中的import进行懒加载  (推荐使用,也是最常用的)

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

/*或者*/

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

2.3  使用VUE中的异步组件进行懒加载

export default new Router({
  routes: [{
    path: '/',
    name: 'HelloWorld',
    component: resolve => { require(['@/components/HelloWorld'],resovle); }
  }]
})

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/185246.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Android开源游戏引擎

    Android开源游戏引擎很多初学Android游戏开发的朋友,往往会显得有些无所适从,他们常常不知道该从何处入手,每当遇到自己无法解决的难题时,又往往会一边羡慕于iPhone下有诸如Cocos2d-iphone之类的免费游戏引擎可供使用,一边自暴自弃的抱怨Android平台游戏开发难度太高,又连个像样的游戏引擎也没有,甚至误以为使用Java语言开发游戏是一件费力不讨好且没有出路的事情。事实上,这种想法完全是没有必要且…

    2022年9月19日
    0
  • 挖矿区块链_什么是挖矿 带你详细了解挖矿基础知识[通俗易懂]

    挖矿区块链_什么是挖矿 带你详细了解挖矿基础知识[通俗易懂]在信息更迭快速的时代下,人们对于一件事物的新鲜感也是很短暂的,比特币和区块链火了,但是人们对于比特币和区块链的热情一直高涨,为了获得比特币奖励,人们加入到挖矿的大军中,什么是挖矿?也许有些小白对于这个词语还不是很了解,那么下面我们就一起来学习下吧!在进行挖矿之前,我们应该首先知道什么是矿,先举个例子吧,我们在用人民币的时候,都可以发现在每一张人民币上都是有编号的,那么谁可以最先猜出人民币上的编号,…

    2022年5月28日
    35
  • 页面自动跳转的两种常用方法

    页面自动跳转的两种常用方法

    2021年7月2日
    87
  • pycharm配置OpenCV_pycharm opencv安装

    pycharm配置OpenCV_pycharm opencv安装PyCharm配置opencv4.5.1一.下载二.安装三.环境配置一.下载首先我们需要拥有PyCharm软件,opencv4.5.1和pip程序包,下载链接如下PyCharm:https://www.jetbrains.com/pycharm/download/#section=windowsopencv4.5.1:https://opencv.org/releases/opencv-python4.5.1:https://pypi.org/project/opencv-python/#file

    2022年10月24日
    0
  • 堆和栈的差别(转过无数次的文章)

    堆和栈的差别(转过无数次的文章)

    2021年12月8日
    34
  • java链表排序方法_java链表排序

    java链表排序方法_java链表排序插入排序    对链表进行插入排序,是最简单的一种链表排序算法,用于插入排序是迭代的,所以每次只移动一个元素,直到所有元素可以形成一个有序的输出列表。    每次迭代中,插入排序只从输入数据中移除一个待排序的元素,找到它在序列中适当的位置,并将其插入。重复直到所有输入数据插入完为止。    插入排序的时间复杂度为O(N^2),空间复杂度为O(1)cla

    2022年10月9日
    0

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号