2021-08-04 实现路由按需导入的步骤(路由懒加载)

最新推荐文章于 2025-04-14 14:28:25 发布

前端OnTheRun

最新推荐文章于 2025-04-14 14:28:25 发布

阅读量432

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/rowlet/article/details/119377886

本文详细介绍了在 Vue 项目中如何实现路由的按需导入，即路由懒加载。首先，在需要懒加载的路由组件文件如 center.js 中导出组件，然后在 index.js 路由配置文件中通过异步方式引入这些组件，以此达到优化项目性能的目的。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.在待导入的路由文件中导出组件(留出对外接口)

示例:

导入个人中心:center.js

export default ({
   
    path: '/center',
    name: 'center',
    component: () =>
        import ('../../views/Center/Center.vue'

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

前端OnTheRun

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

Vue - Router全栈开发的路由懒加载性能优化

AI天才研究院

06-24

963

在全栈开发中，单页面应用（SPA）越来越受欢迎。然而，随着项目规模的不断扩大，打包后的文件体积也会变得越来越大，这会导致首屏加载时间变长，用户体验变差。Vue - Router的路由懒加载就是解决这个问题的有效方法。本文将详细介绍Vue - Router路由懒加载的相关知识，包括原理、实现方式、性能优化案例等，范围涵盖从基础概念到实际应用的各个方面。本文首先会介绍相关的核心概念，包括Vue - Router和路由懒加载；然后讲解核心概念之间的关系和原理架构；

vue router 按需引入

Miss M

03-09

1322

component: resolve =>require(['../components/index'],resolve)

参与评论您还未登录，请先登录后发表或查看评论

react路由组件按需引入

qq_40816649的博客

11-12

1288

对于大型的react项目的首页加载速度如果没有对路由组件进行按需加载打开速度是很慢的。新建jsx文件 import React from 'react'; export default function (componentFactory) { class AsyncComponent extends React.Component { constructor() { ...

路由引入配置

最新发布

wertyh123456的博客

04-14

640

概念：定义‌：路由引入（又称路由重发布）指通过边界设备（如）将一种路由协议（如）的路由信息发布到另一种协议（如）或不同实例（如公网与VPN实例）的过程。‌目的‌：解决多协议网络互通问题，例如混合使用动态协议（OSPF、RIP）与静态路由的场景。‌支持复杂网络架构（如跨的通信），通过引入路由实现流量灵活调度。‌‌‌：1980年代初期，路由技术以静态配置为主，需手动指定路径，仅适用于简单网络拓扑，无法应对动态网络变化‌。‌。

路由懒加载过程

weixin_41656025的博客

08-31

169

路由懒加载是由vue的异步组件和webpack的代码分割功能实现的。 vue异步组件： Vue.component('async-webpack-example', function (resolve) { // 这个特殊的 `require` 语法将会告诉 webpack // 自动将你的构建代码切割成多个包，这些包 // 会通过 Ajax 请求加载 require(['./my-async-component'], resolve) // resolve 回调，这个回调函数会在你从服

路由基础--路由引入

ZZZCY2003的博客

09-23

2122

路由引入的主要作用是实现路由信息在不同路由协议之间的传递和学习。在大型企业网络中，多种路由协议共存是常态，为了实现全网互通，需要通过路由引入来传递路由信息。此外，执行路由引入时还可以部署路由控制，从而实现对业务流量的灵活把控由于不同路由协议之间的路由算法、机制、开销等不同，不同的路由协议之间无法直接分彼此的路由；此时就需要通过路由引入技术将某个路由协议的路由引入到另一个路由协议中类似上图就需要进行路由引入，在OSPF和IS-IS路由域的边界设备上进行操作，使得路由信息在两个动态路由协议之间传递。

路由使用的6个步骤

jing2623的博客

06-06

710

引入路由文件 <script src="./vue-router.js"></script> 2.准备路由需要的组件 var index = Vue.component('index', { template: '<div>首页</div>' }) var productType = Vue.component(...

Vue.js如何实现路由懒加载浅析

10-19

这样，`OtherMassivePage`组件及其依赖会在访问特定路由时按需加载。 2. **异步组件**：另一种方式是将路由组件定义为异步组件，如下所示： ```javascript const OtherMassivePage = resolve => { require....

详解Vue-Router源码分析路由实现原理

11-28

7. **懒加载和代码分割**：Vue-Router支持动态导入组件，这使得大型应用可以按需加载路由，提高首屏加载速度。 8. **路由参数和查询**：Vue-Router允许在路由定义中包含动态段，并且可以处理URL查询参数。 9. **...

react-router-dom v6 实现路由懒加载流程

07-23

以下是实现路由懒加载的步骤： 1. 确保你已经安装了 `react-router-dom` 的版本为 6.x。 ```bash npm install react-router-dom@next ``` 2. 导入需要使用的组件和函数： ```jsx import React, { lazy, Suspense...

路由过滤&路由引入

weixin_68256171的博客

11-05

864

1、按照图示配置 IP 地址，R1，R3，R4 上使用 loopback口模拟业务网段2、R1 和 R2运行RIP V2，R3 和 R4 运行 OSPF，合自协议内部互通3、在 RIP 和 OSPF 间配置双向路由引入，要求除 R4 上的业务网段以外，其他业务网段路由都引入到对方协议内部4、使用路由过滤，使 R4 无法学到 R1 的业务网段路由，要求使用 prefix-list 进行匹配5、OSPF 区域中不能出现 RIP 协议报文。

路由基本概念3——路由引入

热门推荐

m0_49864110的博客

08-31

1万+

在双点单向引入场景中，会有路由回馈的场景（R1和AR2设备同时运行了A协议和B协议，此时在AR1上将A引入B，在AR2上将B引入A，将从A协议学到的路由又引入到A协议中，就称为路由回馈），如果发生了路由回馈现象可能会引起环路。双点双向：在一台设备上，将A协议路由引入到B协议路由中，然后再将B协议路由引入到A协议路由中；1、在AR6上将AR5引入的路由优先级调低，此时AR6去往8.8.8.8就走OSPF，然后在AR6上引入ISIS时就不会引入8.8.8.8的路由了，避免了路由环路与次优。

vue3中常用插件的使用方法：按需引入自定义组件，自动导入依赖包，自动生成路由，自动生成模拟数据

在这里，我乐于倾囊相授，分享我的技术心得、项目实战经验、技术技巧。希望能够惠及更多的开发者，助力大家在技术的海洋中扬帆远航。

02-19

1万+

unplugin-vue-components插件可以在Vue文件中自动引入组件（包括项目自身的组件和各种组件库中的组件）；使用此插件后，不需要手动编写import { Button } from 'ant-design-vue’这样的代码了，插件会自动识别template中使用的自定义组件并自动注册。

“约见”面试官系列之常见面试题之第一百零三篇之vue-router实现路由懒加载（建议收藏）

歌谣的博客

10-15

805

vue异步组件 es提案的import() webpack的require,ensure() vue异步组件技术 ==== 异步加载 vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 . 但是,这种情况下一个组件生成一个js文件 /* vue异步组件技术 */ { path: '/home', name: 'home', component: resolve => require(['@/components/home'],resolve)...

vue实现路由按需加载

wyw223的博客

02-25

568

1.使用vue异步组件的方式 vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 . 但是,这种情况下一个组件生成一个js文件 /* vue异步组件技术 */ { path: '/home', name: 'home', component: resolve => require(['@/components/home'],resolve) },{ ...

vue开发之路由按需加载

wangweiruning的博客

07-31

3874

通过vue写的单页应用时，可能会有很多的路由引入。就像图片的懒加载一样，如果客户根本就没有看到那些图片，而我们却在打开页面的时候全部给加载完了，这样会大大的增加请求的时间，降低用户的体验程度。使用 vue-cli构建的项目,在默认情况下 ,执行 npm run build 会将所有的js代码打包为一个整体，打包的这个文件非常大，不利于加载。我们需要将路由拆分...

Vue项目中的路由配置，两种方式实现路由的按需加载

weixin_43488503的博客

10-07

1523

Vue项目中如何配置路由，路由组件的使用，两种方式实现路由的按需加载

路由的引入

weixin_50281314的博客

07-24

2106

同时出现在全局路由表和协议路由表中，可以引入