vue-router 使用路由懒加载

最新推荐文章于 2023-07-31 15:19:23 发布
最新推荐文章于 2023-07-31 15:19:23 发布
阅读量168 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35436954/article/details/90484435
版权

原来的写法：

routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
]

懒加载写法：

routes: [
    { 
      path: "/Index",
      component: resolve => require(['@/components/Index'], resolve) 
    }
]

 

Hello_HBL
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-router懒加载速度缓慢问题及解决方法
10-17
在单页面应用中，如果不使用懒加载，使用webpack打包后的应用体积可能会非常庞大，导致首次访问应用时需要加载的资源过多，从而需要较长的加载时间，给用户带来长时间的白屏体验，即便进行了loading效果展示，用户...
解决vue-router 嵌套路由没反应的问题
10-14
const router = new VueRouter({ mode: 'history', routes: [ { path: '/recom', component: Recom, // 假设Recom是父组件 children: [ { path: 'view', name: 'recomView', component: recomView }, { path...
vue-router路由懒加载的实现（解决vue项目首次加载慢）
12-11
在Web应用程序中，系统的瓶颈常在于系统的响应速度。如果系统响应速度过慢，用户就会出现埋怨情绪，系统的价值也因此会大打折扣。因此，提高系统响应速度，是非常重要的。 懒加载(Load On Demand)是一种独特而又强大的数据获取方法,它能够在用户滚动页面的时候自动获取更多的数据,而新得到的数据不会影响原有数据的显示,同时最大程度上减少服务器端的资源耗用。 也叫延迟加载，即在需要的时候进行加载，随用随载。 为什么需要懒加载？ 像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了loa
vue路由懒加载
weixin_34228617的博客
03-11 112
vue的路由懒加载 我们可以把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件。 component可以是一个箭头函数，我们可以使用动态 import语法来定义代码分块点； 如果想在network里面看到动态加载的组件名字，可以加webpackChunkName； 同时要在webpack.base.conf.j...
vue-router 实现路由懒加载（ 动态加载路由 ）
最新发布
A12536365214的博客
07-31 2271
在Vue.js中，可以使用vue-router来实现路由懒加载，也称为动态加载路由。路由懒加载的目的是在用户访问某个路由时再加载对应的组件，而不是在应用初始化时一次性加载所有组件。这样可以提高应用的初始加载速度，只在需要时才加载对应的组件。要实现路由懒加载，可以使用Vue提供的异步组件加载功能，结合import()函数或webpack的动态import()语法。
实现vue-router 路由懒加载
weixin_34255055的博客
10-31 211
相比React，Vue实现组件的懒加载还是比较简单的，以下是官方文档的说明 import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) export default new VueRouter({ routes: [ { path: '/', name: 'Navigator', compon...
vue-router路由懒加载
性感小胡子的博客
07-16 348
Vue.js笔记 — vue-router路由懒加载 用vue.js写单页面应用时，会出现打包后的JavaScript包非常大，影响页面加载，我们可以利用路由的懒加载去优化这个问题，当我们用到某个路由后，才去加载对应的组件，这样就会更加高效，实现代码如下： import Vue from 'vue' import Router from 'vue-router' Vue.use(Route...
基于vue-router 多级路由redirect 重定向的问题
10-18
本文将详细介绍在使用 vue-router 实现多级路由的重定向时可能会遇到的问题以及解决方案。 首先，让我们了解一些基础知识。在 vue-router 中，重定向是将指定路由映射到另一个路径的过程。重定向可以是动态的，也...
vue2笔记 — vue-router路由懒加载的实现
12-09
实现Vue Router的路由懒加载需要使用 Webpack 的动态导入功能。以下是一个简单的示例： ```javascript import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ ...
Vue路由（Router）实现懒加载
Mahuicool的博客
12-26 427
“懒加载也叫延迟加载，即在需要的时候进行加载，随用随载。在单页应用中，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，延时过长，不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。” 按需加载写法： require(["src/xx/xxx/xx.vue"], re...
vue-router懒加载
Beamon__的博客
05-22 431
1.在创建路由的配置文件中改变引入组件的方式，将原始引入方式改为异步引入 // 原始引入方式 import Home from "@pages/home"; // 异步引入方式 const Home = () => import('@/pages/home'); 2.修改webpack的output配置 修改 build/webpack.base.conf.js // 添加c...
vue-router的懒加载模式
小羽向前跑
06-04 1020
vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出现长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载的时间。 不使用懒加载写法： import Vue from 'vue' import Route...
vue-router路由懒加载的使用
qq_49643195的博客
05-25 268
Vue为什么需要懒加载（按需加载）？ Vue的特点是SPA——Single Page Application（单页应用程序）。它有着诸如：“只有第一次会加载页面,以后的每次页面切换，只需要进行组件替换；减少了请求体积，加快页面响应速度，降低了对服务器的压力”等等优点。 因为Vue是SPA，所以首页第一次加载时会把所有的组件以及组件相关的资源全都加载了。这样就会导致首页加载时加载了许多首页用不上的资源，造成网站首页打开速度变慢的问题，降低用户体验。 所以为了解决上面问题，我们需要对...
路由懒加载及实现方式(vue-router)
热门推荐
weixin_42464106的博客
07-26 1万+
什么是路由懒加载？--延迟加载，在需要的时候才会进行加载。实现路由懒加载的方法，vue-router,Vue异步组件 ES6的import() webpack的require.ensure()
vue-router路由懒加载(记录)
weixin_34198583的博客
05-24 205
当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。 项目代码 这次也是刚学到的一段代码,方便项目管理 懒加载路由 目录结构: - router - index.js - router.js 复制代码 router.js : 路由信息文件 export...
vue-router 路由监听 重定向 路由懒加载 模式
weixin_42619706的博客
07-16 506
ajax： axios： fetch：
vue-router如何实现路由懒加载
04-02
在使用 Vue.js 进行项目开发时，通常会使用 vue-router 进行路由管理，而路由懒加载则是一种优化方式，可以在减少页面加载时间的同时，提高用户体验。下面是实现路由懒加载的方法： 1. 安装 babel-plugin-syntax-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值