首页 > 其他分享 >vue3路由懒加载

vue3路由懒加载

时间:2024-03-26 23:02:12浏览次数:30  
标签:vue vue3 createRouter import login 路由 加载

        路由懒加载作用:部分项目过大,首次加载耗费时间较多,路由懒加载可以让首屏组件加载速度更快一些,减少用户首次使用等待时间

        路由懒加载的本质:按需引入

        下面是未使用懒加载的代码:

import Login from '@/views/login/index.vue'

const router = createRouter({
  routes: [
    { path: '/login', component: Login },
  ]
})

        下面是使用了懒加载的代码(需要导入组件):

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  routes: [
    {
    path:'/login',
    component:()=>import('@/views/login/LoginPage.vue')
    }
  ]
})

        懒加载通过使用import进行按需导入。

标签:vue,vue3,createRouter,import,login,路由,加载
From: https://blog.csdn.net/2201_75918981/article/details/136920510

相关文章

  • Vue3+TS项目,eslint安装配置
            eslint的作用主要为:可以规范团队的代码风格。在实际项目中,团队的每个成员的编码习惯都不同,这极有可能造成,一个项目多个代码风格,这会造成代码阅读困难,后期维护难度大灯问题,这就需要配置下eslint。首先我们需要先安装 @eslint/create-config 插件:pnpminstal......
  • VUE3.0(一):模板语法及指令介绍
    模板语法Vue使用了基于HTML的模板语法,允许开发者声明式地将DOM绑定至底层Vue实例的数据。Vue的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进DOM的系统。结合响应系统,在应用状态改变时,Vue能够智能地计算出重新渲染组件的最小代价并应用到DOM......
  • vue3,实现如何在element plus Collapse折叠面板中,只有在点击图标时才展开
        这个的类名是tailwindcss的,主要看这里,对应上面的图片<el-collapse-itemname="1"class="relative"><template#title><divclass="w-full"><div@click="handleChangeURL"......
  • electron+vite+vue3创建技术选型(一)
    1.>目前有electron然后自己根据vue项目集成的,需要自己配置各种文件(目前跟网上的帖子走了几个发现各种问题卡在了run白屏这里,不知道是包的问题,还是版本语法的问题)https://www.electronjs.org/zh/2.>https://cn-evite.netlify.app/guide/这个是electron-vite 是一个新型构建......
  • 基于 Vue3 + Element-plus 封装的 Table 组件
    项目信息项目名称:vue3-xmw-table预览地址:点击预览Github:vue3-element-table使用方法根目录下执行npmivue3-xmw-table命令npmivue3-xmw-table全局挂载组件import{createApp}from'vue'importAppfrom'./App.vue'importXmwtablefrom'vue3-xmw-table'......
  • Django_Restful_Framework视图与路由
    视图与路由drf除了在数据序列化部分简写代码以外,还在视图中提供了简写操作。所以在django原有的django.views.View类基础上,drf封装了多个子类出来提供给我们使用。**DjangoRESTframwork**提供的视图的主要作用:控制序列化器的执行(检验、保存、转换数据)控制数据库查询的执......
  • vue3+ts项目引入富文本编辑器wangeditor
    说明项目开发中,做到媒体说、资讯等模块时,会需要引入富文本编辑器,对比发现wangeditor使用群众多,并且很多问题也已经有解答。界面展示实现要点引入wangeditor配置导航栏代码<template><divstyle="border:1pxsolid#EEEFF0;border-radius:5px;overflow:hidden;wid......
  • UE4.27, 代码实践, 资源加载 FSoftClassPath / FSoftObjectPath
    //以下的FSoftClassPath/FSoftObjectPath都公开在Editor里设定 //iteminTArray<FSoftClassPath>FSoftClassPathtemp=FSoftClassPath_UsedInBluePrint_BuildFunc(item);UClass*LoadedClass=temp.TryLoadClass<AActor>();FSoftClassPathFSoftClassPath_UsedInBlu......
  • [Vue3] 嵌套路由
    App.vue<template><divclass="app"><!--导航区--><divclass="navigate"><RouterLinkto="/home">Home</RouterLink><RouterLinkto="/news">News</Route......
  • 01、路由策略简介
    路由策略简介定义:路由策略主要实现了路由过滤和路由属性设置等功能,它通过改变路由属性(包括可达性)来改变网络流量所经过的路径。目的:路由协议在发布、接收和引入路由信息时,根据实际组网需求实施一些策略,以便对路由信息进行过滤和改变路由信息的属性,如:控制路由的接收......