vue尚品汇商城项目-day07【51.路由懒加载】

我就是我 2024-03-24 13:42 29阅读 0赞

![在这里插入图片描述][201cb7e59bb94276b20be0c55371360b.jpeg_pic_center]

#### 文章目录 ####

*   *  51.路由懒加载
 *  本人其他相关文章链接

### 51.路由懒加载 ###

> 官网介绍：

![在这里插入图片描述][1c15e7acbb3441ee9efd90a18f97770c.png_pic_center]

> 理解

(1) 当打包构建应用时，JS包会变得非常大，影响页面加载。如果我们能***把不同路由对应的组件分割成不同的代码块***，然后当路由被访问的时候才加载对应组件，这样就更加高效了

(2) 本质就是***Vue 的异步组件***在路由组件上的应用

(3) 需要使用动态import语法, 也就是***import()函数***

使用方式：在src/router/routes.js中配置

> 原来的写法

import Home from '@/pages/Home'
    
    {
            path: '/home',
            component: Home,
            meta:{"isShow": true}   //自定义元数据属性，判断Footer组件在底部是否显示
        },

> 路由懒加载写法，都不用再引入组件，直接在component后面写上即可达到效果。

component: () => import('@/pages/Home'),

## 本人其他相关文章链接 ##

1.[vue尚品汇商城项目-day07【44.个人中心二级路由搭建+45.我的订单+46.优化登录跳转+47.独享守卫】][vue_-day07_44._45._46._47.]  
2.[vue尚品汇商城项目-day07【vue插件-48.（了解）图片懒加载插件】][vue_-day07_vue_-48.]  
3.[vue尚品汇商城项目-day07【vue插件-49.（了解）自定义插件】][vue_-day07_vue_-49.]  
4.[vue尚品汇商城项目-day07【vue插件-50.（了解）表单校验插件】][vue_-day07_vue_-50.]  
5.[vue尚品汇商城项目-day07【51.路由懒加载】][vue_-day07_51.]  
6.[vue尚品汇商城项目-day07【52.打包文件，处理map文件】][vue_-day07_52._map]  
7.[vue尚品汇商城项目-day07【53.nginx反向代理配置】][vue_-day07_53.nginx]  
8.[vue尚品汇商城项目-day07【vue插件-54.（了解）生成二维码插件】][vue_-day07_vue_-54.]  
9.[vue尚品汇商城项目-day07【55.编码测试与打包发布项目】][vue_-day07_55.]

[201cb7e59bb94276b20be0c55371360b.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/f86dd8ac886f4b93bc04b1fa6a95ffa6.png
[1c15e7acbb3441ee9efd90a18f97770c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/ffe68c766cd243ac8222462a4ea18230.png
[vue_-day07_44._45._46._47.]: https://blog.csdn.net/a924382407/article/details/129921578
[vue_-day07_vue_-48.]: https://blog.csdn.net/a924382407/article/details/129921625
[vue_-day07_vue_-49.]: https://blog.csdn.net/a924382407/article/details/129921710
[vue_-day07_vue_-50.]: https://blog.csdn.net/a924382407/article/details/129921764
[vue_-day07_51.]: https://blog.csdn.net/a924382407/article/details/129921802
[vue_-day07_52._map]: https://blog.csdn.net/a924382407/article/details/129921841
[vue_-day07_53.nginx]: https://blog.csdn.net/a924382407/article/details/129921856
[vue_-day07_vue_-54.]: https://blog.csdn.net/a924382407/article/details/129946011
[vue_-day07_55.]: https://blog.csdn.net/a924382407/article/details/129946037