是因为程序自身的Bug导致页面加载异常利用路由的懒加载实现组件的按需加载，这样配置后只有当路由被访问时才会加载对应的组件，而不是在加载首页的时候就直接加载即可恢复；* 懒加载功能 一开始不加载，当你切换路由的时候再加载 * component = import* webpackChunkName quotaboutquot * #39viewsAboutViewvue#39， * about不是根路径 所以redirect后面要写全 #39aboutaboutchild#39。

幸运的是vuerouter支持WebPack内置的异步模块加载系统所以，那些使用较少的路由组件不必打包进bundles里，只需要在路由被访问时按需加载话不多说了，来一起看看详细的实现过程使用假设你的路由配置是这样的import；在 Vue2 中，异步组件和路由懒加载处理使用 import 就可以很轻松实现但是在 Vue 3x 中异步组件的使用与 Vue 2x 完全不同了本文就详细讲讲 vue3 中 异步组件 和 路由懒加载 的实现所以，下面的异。

keepalive用来缓存组件，避免了每次点击其他页面都要加载，减少性能消耗和提高用户体验，下图缓存整个路由视图所有页面，也可以缓存单个组件 图片懒加载用了 vuelazyload 组件，npm安装npm i vuelazyload S#160我是；中，通过 this$ 的方式去获取xx参数的值，那就是拿不到的，如果改为方式1，那就可以取得到了猜想的原因应该是项目启动，懒加载方式，路由加载注册的时候没有加载 path#39#39 下的 $route。

1打包的时候不生成map文件打包的时候生成gzip文件，部署的时候，让nginx直接读取gzip文件2路由加载的时候采用懒加载模式3首页较大的图片适当的进行压缩即可。

vue路由懒加载原理

优化方法1路由懒加载此方法会把原本打包到一个appjs文件分开成多个js文件打包，这样会减小单个文件的大小，但是不会减小整个js文件夹的大小通过这种方式可以做到按需加载，只加载单个页面的js文件2组件异步加载加载。

系统bug，网络问题1系统bug是vue路由懒软件系统出现了问题，导致加载显示好多js，等待官方修复即可2网络问题是自身设备连接的网络出现较大波动，导致vue路由懒加载还是好多js，更换网络重新打开即可。

在路由规则里定义如下 pid是一个变量，在用这个动态路由的时候可以 懒加载是当你点击一个页面时，先缓存所有的链接，不执行，只执行那个页面的资源，这样可以提升效率，提高响应速度路由懒加载很简单，在component用import引入。

会卡顿每个路由都需要进行匹配和解析，而多层嵌套的路由将导致匹配时间变长，从而影响应用程序的性能1懒加载路由使用懒加载路由可以在需要时异步加载组件并分块打包，从而避免一次性加载所有组件，优化页面加载速度2。

vue由静态路由改为动态路由时，出现下面的错误 静态路由懒加载，当我们把router写死import里面它是正常加载的，可是我们通过api接口拉取过来的数据时，发现是不报了上面的错export const importPath = comUrl =。

vue路由懒加载的实现方式

1、懒加载的方式import Vue from #39vue#39import Router from #39vuerouter#39VueuseRouter采用了懒加载export default new Router routes path#39#39， componentresolve = require#39@componentsindex#39，res。

2、报错原因 很有可能是你在路由懒加载的时候，在import里使用了动态路径比如， component = import* webpackChunkName quothomequot * PATH + #39Indexvue#39 ，这样的路径是不起作用的，具体原因可以查看。

3、否则会永远以根路由开始请求，这样不方便我们调用渲染数据3 当使用 keepalive 时，组件的 activated 和 deactivated 钩子函数会在切换时被触发4 当使用路由懒加载时，需要使用异步组件来渲染子组件。