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

路由懒加载详解[通俗易懂]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)


相关推荐

  • 我们可以使用命令kill来结束Linux系统下运行的进程(kill强制杀死进程)

    杀死进程最安全的方法是单纯使用kill命令,不加修饰符,不带标志。首先使用ps-ef命令确定要杀死进程的PID,然后输入以下命令:#kill–pid注释:标准的kill命令通常都能达到目的。终止有问题的进程,并把进程的资源释放给系统。然而,如果进程启动了子进程,只杀死父进程,子进程仍在运行,因此仍消耗资源。为了防止这些所谓的“僵尸进程”,应确保在杀死父进程之前,先杀死其所有的子进程。确定要杀死进程的PID或PPID#ps-ef|grephttpd以优雅的方式结束进

  • 单片机之IIC通信协议「建议收藏」

    单片机之IIC通信协议「建议收藏」概念I2C(IIC,Inter-IntegratedCircuit),两线式串行总线,由PHILIPS公司开发用于连接微控制器及其外围设备。它是由数据线SDA和时钟SCL构成的串行总线,可发送和接收数据。在CPU与被控IC之间、IC与IC之间进行双向传送,高速IIC总线一般可达400kbps以上。硬件IIC:硬件IIC速度比模拟快,并且可以用DMA。硬件IIC会自动匹配与从机的通信时序,…

  • 博客:”重读黑客与画家”

    博客:”重读黑客与画家”

  • Vue学习之样式处理[通俗易懂]

    Vue学习之样式处理[通俗易懂]Vue学习之样式处理

  • 解决$.ajax()请求异常~ jQuery提示parsererror错误解决办法

    解决$.ajax()请求异常~ jQuery提示parsererror错误解决办法在前端通过ajax请求后台之后返回的时候,出现了下面的异常:error:function(req,textStatus,errorThrown){}req:textStatus:”parsererror”;errorThrown:undefined.而自己的ajax请求如下:type:’POST’,contentType:’application/j…

  • PriorityQueue的用法和底层实现原理

    PriorityQueue的用法和底层实现原理先讲使用,再讲原理队列是遵循先进先出(First-In-First-Out)模式的,但有时需要在队列中基于优先级处理对象。举两个例子:作业系统中的调度程序,当一个作业完成后,需要在所有等待调度的作业中选择一个优先级最高的作业来执行,并且也可以添加一个新的作业到作业的优先队列中。 每日交易时段生成股票报告的应用程序中,需要处理大量数据并且花费很多处理时间。客户向这个应用程序发送请求时,…

发表回复

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

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