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
        }