Vue小技巧-懒加载

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

一、图片懒加载：

首先安装 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"/>

 

二、路由懒加载：

路由懒加载能够按需调用须要的组件

箭头函数返回一个import路径

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

而后正常调用便可

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