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

最新推荐文章于 2024-09-23 13:02:25 发布

原创

最新推荐文章于 2024-09-23 13:02:25 发布 · 447 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

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

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

1103

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

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

最新发布

ZZZCY2003的博客

09-23

2401

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

路由使用的6个步骤

jing2623的博客

06-06

721

引入路由文件 <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

927

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 协议报文。

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

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

02-19

1万+

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

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

歌谣的博客

10-15

901

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

588

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

vue开发之路由按需加载

wangweiruning的博客

07-31

3888

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

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

weixin_43488503的博客

10-07

1552

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

路由的引入

weixin_50281314的博客

07-24

2130

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

vue中路由按需加载的几种方式

weixin_43961899的博客

12-17

399

使用vue-cli构建项目后，我们会在router文件夹下面的index.js里面引入相关的路由组件，如： import home from ‘@components/home’ 普通加载的缺点： webpack在打包的时候会把整个路由打包成一个js文件，如果页面一多，导致这个文件非常大，加载缓慢，所以就用到了我们的按需加载 vue异步加载 { path: '/home', nam...