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

vue 路由懒加载

时间:2023-06-18 16:22:04浏览次数:56  
标签:vue const 导入 UserDetails 路由 加载

VUE路由的懒加载,官网是这样说明的:

当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就会更加高效。

Vue Router 支持开箱即用的动态导入,这意味着你可以用动态导入代替静态导入:

// 将
// import UserDetails from './views/UserDetails.vue'
// 替换成
const UserDetails = () => import('./views/UserDetails.vue')

const router = createRouter({
  // ...
  routes: [{ path: '/users/:id', component: UserDetails }],
})


来自为知笔记(Wiz)

标签:vue,const,导入,UserDetails,路由,加载
From: https://www.cnblogs.com/baiyifengyun/p/17489271.html

相关文章

  • 前端Vue加载中页面动画弹跳动画loading
    前端Vue加载中页面动画弹跳动画loading,下载完整代码请访问uni-app插件市场址:https://ext.dcloud.net.cn/plugin?id=13091效果图如下:使用方法<!--ref:唯一ref top:距离中间顶部距离--><cc-loadingref="mixLoad":top="0"></cc-loading>//隐藏动画this.$refs.mix......
  • 一文看完Vue3的渲染过程
    Vue3官网中有下面这样一张图,基本展现出了Vue3的渲染原理:本文会从源码角度来草率的看一下Vue3的运行全流程,旨在加深对上图的理解,从下面这个很简单的使用示例开始:import{createApp,ref}from"vue";createApp({template:`<divclass="card"><butt......
  • 关于uni-app与vue路由配置的不同,不使用uni.navigateTo接口跳转时,使用this.$router.pus
    之前用vue写router路由的时候,先配置一个路由表,然后再将配好的路由push到已有的组件里面,再通过<RouterView></RouterView>方法将每一个调用的路由的内容渲染到父组件要用的位置。今晚我在用uni-app的时候,突然不想用uni-app自己提供的路由跳转方法:uni.navigateTo我想用vue那种路由......
  • 前端Vue分享菜单按钮弹框、微博分享、QQ分享、微信好友、朋友圈
    前端Vue分享菜单按钮弹框、微博分享、QQ分享、微信好友、朋友圈 ,下载完整代码请访问uni-app插件市场址:https://ext.dcloud.net.cn/plugin?id=13085效果图如下:使用方法<!--分享ref:设置一个唯一refcontentHeight:弹框高度shareList:分享数组click:分享菜单按钮点击--......
  • vue学习笔记二
    四,vue中的AJAX比较了各种AJAX的方式,xhr,jQuery,fetch,综合考虑都不好,直接就G了,xhr学过,fetch了解过,jQuery听说过,结果最后表示要用axios。。。点个海克斯“考前恶补”。1.配置代理<template> <div>  <button@click="getstudents">获取学生信息</button></div></template>​<......
  • 使用 Vue.js 的 CDN(内容分发网络)来添加 Vue.js
    在您的HTML文件中添加script标签,并指定Vue.js的CDN地址。通常可以通过在 <head> 标签或 <body> 标签的底部添加该标签来加载Vue.js。下面是一个常用的Vue.jsCDN地址:<scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>一下是一个小小的案......
  • 从源码级深入剖析Tomcat类加载原理
    众所周知,Java中默认的类加载器是以父子关系存在的,实现了双亲委派机制进行类的加载,在前文中,我们提到了,双亲委派机制的设计是为了保证类的唯一性,这意味着在同一个JVM中是不能加载相同类库的不同版本的类。然而与许多服务器应用程序一样,Tomcat允许容器的不同部分以及在容器上运行的......
  • 前端Vue非常简单实用商品分类展示组件 侧边商品分类组件
    前端vue非常简单实用商品分类展示组件侧边商品分类组件 ,下载完整代码请访问uni-app插件市场址:https://ext.dcloud.net.cn/plugin?id=13084效果图如下:使用方法<!--flist:第一级数组slist:第二级数组tlist:第三级数组@click:点击事件注意:下一级pid与上一级id对应关联......
  • 懒加载与急加载FetchType.LAZY&FetchType.EAGER的区别和使用?
    1、FetchType.LAZY:懒加载,加载一个实体时,定义懒加载的属性不会马上从数据库中加载。2、FetchType.EAGER:急加载,加载一个实体时,定义急加载的属性会立即从数据库中加载。3、比方User类有两个属性,name跟address,登录后用户名是需要显示出来的,此属性用到的几率极大,要马上到数据库查,用......
  • 记录--封装一个通过js调用的全局vue组件
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助前言在使用vue项目编写的时候,不可避免的会碰到需要时jsapi来调用组件进行显示的情况例如饿了么elementui的Notification通知、Message消息提示等组件虽然已经提供了,但是由于api的限制,我们只能通过特定的参......