首页 > 其他分享 >vue2实现路由懒加载

vue2实现路由懒加载

时间:2023-03-28 12:11:18浏览次数:46  
标签:babel dynamic syntax component vue2 import home 路由 加载

以下内容仅供学习使用

  1. 安装@babel/plugin-syntax-dynamic-import插件。
    1.1 使用npm安装:
    npm install --save-dev @babel/plugin-syntax-dynamic-import
    1.2 使用yarn安装:
    yarn add --dev @babel/plugin-syntax-dynamic-import
  2. 安装完成后,在您的babel配置文件(通常是.babelrc或babel.config.js文件)中添加@babel/plugin-syntax-dynamic-import插件。
    image

2.1 例如,如果您使用.babelrc文件,您可以这样配置:

{
  "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

2.2 如果您使用babel.config.js文件,您可以这样配置:

module.exports = {
  plugins: ['@babel/plugin-syntax-dynamic-import']
}
  1. 在路由配置中使用component: () => import('component/path')替换原有的component: ComponentName。
const login = () => import('@/views/login/index.vue')//第二种方法
const home = () => import('@/views/home/index.vue')
const routes = [
  {
    path: '/',
    redirect: '/login'
  },
  {
    path: '/login',
    name: 'login',
    //component:() => import('@/views/home/index.vue')  1、第一种方法
	component:login //第二种方法
  },
  {
    path: '/home',
    name: 'home',
    component: home
  },

]

标签:babel,dynamic,syntax,component,vue2,import,home,路由,加载
From: https://www.cnblogs.com/Amyel/p/17264658.html

相关文章

  • 记录优化vue项目首屏加载慢的过程
    一背景当项目部署在外网时,前端首屏加载的平均时间是10S,通过开发者工具查看加载的包,例如chunk-libs.xxx.js的有2.9MB,因为包太大导致加载慢,严重影响了用户体验。所以解决......
  • Tomcat 启动时类加载顺序
    Tomcat启动时类加载顺序Tomcat启动时classloader加载顺序  Tomcat的class加载的优先顺序一览    1.最先是$JAVA_HOME/jre/lib/ext/下的jar文件。   ......
  • vue2+element-ui+springboot+mybatis-plus获取当前账户进行修改密码详细教程
    以下内容仅供学习使用新建一个dto类,用于专门修改当前账户的使用importlombok.Data;@DatapublicclassUserPasswordDTO{privateStringusername;priva......
  • tomcat的类加载机制
    看完了Java类装载器,我们再来看看利用服务器(Tomcat)对类加载器的利用,每个利用服务器都有一套自己的类加载器系统,从而与Java的类加载器差异开以到达自己与利用过程隔绝的......
  • servlet 与 jsp的加载过程
    彻底搞清楚servlet和jsp的加载过程我们在书本上学习到的一般都是说servlet的生命周期,很少有介绍jsp的生命周期,今天我就结合我的感受,为大家说一下关于jsp的生命周期。首先......
  • 使用alloc_chrdev_region/register_chrdev_region/cdev注册字符设备和使用class在驱动
    前言在旧版本中使用register_chrdev函数注册字符设备,该函数只需给定主设备号即可。一旦确认了主设备号,该主设备号下的所有次设备号全部都没有用,并且在驱动加载成功后还需......
  • Vue中路由的创建、跳转
    一、创建路由1、先创建一个route.js文件,创建路由,导出路由。//创建路由,从vue-router中导入两个方法。import{createWebHistory,createRouter}from"vue-r......
  • centos添加永久静态路由
    CentOS7系统双网卡环境下添加静态路由的几种方法发布于2019-11-2111:11:44阅读 9.4K0 如下拓扑图所示(点击图片查看清晰大图)场景简单描述一下:CentOS7......
  • 直播平台搭建,JS实现页面下拉加载数据操作
    直播平台搭建,JS实现页面下拉加载数据操作前端页面代码如下,我用的PHP,HTML页面应该就行,主要是在id="ph"的div内加载数据: <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0......
  • Vue2模版编译(AST、Optimize 、Render)
    在Vue$mount过程中,我们需要把模版编译成render函数,整体实现可以分为三部分:parse:解析模版template生成AST语法树optimize:优化AST语法树,标记静态节点codegen:把优化......