当前位置：首页 > article >正文

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

article 2025/2/8 12:55:16

在这里插入图片描述

文章目录

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

51.路由懒加载

官网介绍：

在这里插入图片描述

理解

(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.独享守卫】
2.vue尚品汇商城项目-day07【vue插件-48.（了解）图片懒加载插件】
3.vue尚品汇商城项目-day07【vue插件-49.（了解）自定义插件】
4.vue尚品汇商城项目-day07【vue插件-50.（了解）表单校验插件】
5.vue尚品汇商城项目-day07【51.路由懒加载】
6.vue尚品汇商城项目-day07【52.打包文件，处理map文件】
7.vue尚品汇商城项目-day07【53.nginx反向代理配置】
8.vue尚品汇商城项目-day07【vue插件-54.（了解）生成二维码插件】
9.vue尚品汇商城项目-day07【55.编码测试与打包发布项目】

查看全文

http://www.kler.cn/a/6132.html