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

文章目录

• 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'),