Vue小技巧-懒加载

vue

Vue懒加载包括图片懒加载与路由懒加载

1、图片懒加载：

首先安装 vue-lazyload包

然后导入并加载事先下载好的加载图片

import VueLazyLoad from 'vue-lazyload'
Vue.use(VueLazyLoad,{
  loading: require('@/common/image/default.png')
})

在使用时可以在需要加载图片的位置使用：

<img  width="100" heigth="100" v-lazy="item.picUrl"/>

2、路由懒加载：

路由懒加载可以按需调用需要的组件

箭头函数返回一个import路径

const Disc = ()=> import('@/components/disc/disc')

然后正常调用即可

{
          path: ':id',
          component: Disc
        }