路由懒加载详解[通俗易懂]

路由懒加载详解[通俗易懂]1.什么是路由懒加载?整个网页默认是刚打开就去加载所有页面,路由懒加载就是只加载你当前点击的那个模块。按需去加载路由对应的资源,提高首屏加载速度(tip:首页不用设置懒加载,而且一个页面加载过后再次访问不会重复加载)。实现原理:将路由相关的组件,不再直接导入了,而是改写成异步组件的写法,只有当函数被调用的时候,才去加载对应的组件内容。2.传统路由配置:importVuefrom’vue’importVueRouterfrom’vue-router’importLogi

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

Jetbrains全系列IDE稳定放心使用

1.什么是路由懒加载?

整个网页默认是刚打开就去加载所有页面,路由懒加载就是只加载你当前点击的那个模块。

按需去加载路由对应的资源,提高首屏加载速度(tip:首页不用设置懒加载,而且一个页面加载过后再次访问不会重复加载)。

实现原理:将路由相关的组件,不再直接导入了,而是改写成异步组件的写法,只有当函数被调用的时候,才去加载对应的组件内容。

2.传统路由配置:

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '@/views/login/index.vue'
import Home from '@/views/home/home.vue'
Vue.use(VueRouter)
const router = new VueRouter({
 routes: [
    { path: '/login', component: Login },
    { path: '/home', component: Home }
  ]
 
export default router

3.路由懒加载写法:

import Vue from 'vue'
import VueRouter from 'vue-router'
 
//const  Login = ()=> {
//    return  import('@/views/login/index.vue')
//}
//const  Home = ()=> {
//    return  import('@/views/home/home.vue')
//}
//有return且函数体只有一行,所以省略后为
const  Login = ()=> import('@/views/login/index.vue') 
 
const  Home = ()=>  import('@/views/home/home.vue')
 
Vue.use(VueRouter)
const router = new VueRouter({
 routes: [
    { path: '/login', component: Login },
    { path: '/home', component: Home }
  ]
 
export default router

再次简化(省去定义变量):

import Vue from 'vue'
import VueRouter from 'vue-router'
 
Vue.use(VueRouter)
const router = new VueRouter({
 routes: [
    { path: '/login', component: () => import('@/views/login/index.vue') },
    { path: '/home',  component: () => import('@/views/home/home.vue') }
  ]
 
export default router

最终,路由懒加载就配置完成了。

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

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/185023.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • java逻辑删除代码_MybatisPlus实现逻辑删除功能

    java逻辑删除代码_MybatisPlus实现逻辑删除功能逻辑删除你有没有见过某些网站进行一些删除操作之后,你看不到记录了但是管理员却能够查看到。这里就运用到了逻辑删除。什么是逻辑删除?逻辑删除的本质是修改操作,所谓的逻辑删除其实并不是真正的删除,而是在表中将对应的是否删除标识(deleted)或者说是状态字段(status)做修改操作。比如0是未删除,1是删除。在逻辑上数据是被删除的,但数据本身依然存在库中。对应的SQL语句:updateusers…

  • typescript web_typescript文档

    typescript web_typescript文档前言上一篇我们讲到如何手动编译TypeScript,如果我们每次都要手动编译,那么这样会很累,接下来就介绍自动编译TypeScript。mac自动编译typescript在Typescript文

  • YOLOv5学习总结(持续更新)「建议收藏」

    YOLOv5学习总结训练效果(持续更新)前言网络结构可视化yolov3yolov4yolov5核心基础内容Mosaic数据增强自适应锚框计算自适应图片缩放首先感谢江大白大佬的研究与分享,贴上链接深入浅出Yolo系列之Yolov5核心基础知识完整讲解将yolov3-v5的变化讲的很清楚,思路很清晰,值得花时间好好从头到尾读一遍。训练效果(持续更新)先贴结果,自己试了组工牌胸牌检测(yolov5s),100个epoch的mAP@.5达到0.95,效果真的不错,检测速度也很快,一张图0.009s(20

  • 学生个人网页设计作品_简单的静态网页代码

    学生个人网页设计作品_简单的静态网页代码学生个人静态网页设计作品之我的家乡设计思路知识运用内容介绍页面代码展示作品展示设计思路页面使用居中效果,留下留白简洁简便,使浏览者在浏览的过程中有一种舒适感,在视觉方面有着清晰安静的画面,吸引浏览者对下面内容的浏览。作品采用的背景是白色,在视觉方面上有着明亮的空间,主体内容宽度为1080px,较大的宽度让浏览者能够清晰的浏览。知识运用在操作方面上运用了html5和css3,采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识内容介绍《我的家

  • kafka删除topic方式

    kafka删除topic方式工作中因为各种原因,topic中消息堆积的太多或者kafka所在磁盘空间满了等。可能需要彻底清理一下kafkatopic。cd/opt/kafka/kafka_2.10-0.10.2.2/bin列出所有topic:./kafka-topics.sh–zookeeperip:2181-list其实就是检查zk上节点的/brokers/topics子节点,打印出来。创建topic…

    2022年10月17日

发表回复

您的电子邮箱地址不会被公开。

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