vue路由懒加载的效果
路由器的设置和使用可能会让一些新手感到困惑，本文vue路由懒加载的效果将为您提供简单易懂的路由器指南和使用技巧。
本文目录一览：
vue3 + vite实现异步组件和路由懒加载
在 Vue2 中，异步组件和路由懒加载处理使用 import 就可以很轻松实现。但是在 Vue 3.x 中异步组件的使用与 Vue 2.x 完全不同了。本文就详细讲讲 vue3 中 异步组件 和 路由懒加载 的实现。
所以，下面的异步组件声明：
等价于：
Vue 3.x的异步组件加载函数将不再接收 resolve 和 reject ，而且必须始终返回 Promise 。也就是说，工厂函数接收 resolve 回调的方式定义异步组件在 Vue 3.x 不能使用了。
提示： 如果是用 vite 工具来构建项目，在本地开发使用 import 做 路由懒加载 ，可以正常加载，但是会报警告；打包到 生产环境 会报错，页面不会正常展示，可以使用以下两种方法来实现。
欢迎访问： 个人博客地址
vue路由懒加载，vue首屏加载慢和使用懒加载prefetch问题，新增组件懒加载
以上是常规引入页面得部分
下面来看下使用路由懒加载的写法
看一下打包之后的效果，会看到打包出了多个chunk异步块。
同样可以使用特殊注释语法
Vue keep-alive本地路由缓存和图片懒加载
keep-alive用来缓存组件,避免了每次点击其他页面都要加载,减少性能消耗和提高用户体验，下图缓存整个路由视图(所有页面)，也可以缓存单个组件
图片懒加载用了 vue-lazyload 组件，npm安装：npm i vue-lazyload -S
我是全局引用的，所以在main.js里引用 vue-lazyload
之后在需要懒加载的图片上把src换成v-lazy
效果如图
当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次，俗称占位图），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载，因为很多页面，内容很丰富，页面很长，图片较多。比如说各种商城页面。这些页面图片数量多，而且比较大，少说百来K，多则上兆。要是页面载入就一次性加载完毕。估计大家都会等到黄花变成黄花菜了。当用户网速慢时，可以先显示一张loading的动态图，预先让用户有心理准备，否则打开后一片空白会使得用户体验变差。
路由器是家庭和办公室网络的核心，通过学习这些技巧和方法，您将能够轻松设置和管理您的网络。
