vue缓存路由.懒加载，图片懒加载,日期库

   

 

一.缓存路由对象（缓存在浏览器内存中）  <keep-alive/>

      vue2.0提供了一个keep-alive组件来缓存组件，避免多次加载相应的组件，消耗性能。

   一般有这样的需求，当我们第一次进入列表页需要请求下数据，在从列表页进入详情页，详情页不缓存也需要请求数据，然后返回列表页，这时可以用keep-alive组件。

  分析所以有三种情况：

  1.默认进来列表页需要请求数据

  2.进入详情页后，通过浏览器默认后退返回按钮，不需要请求ajax

  3.进入详情页后，通过点击链接返回到列表页后，也是需要发ajax请求的

配置如下：在app.vue页面中缓存所有页面

<keep-alive>  <router-view/> </keep-alive>

 

二.路由加载（需要 才向后台发送请求）

   路由懒加载按需加载页面，用于提高页面的加载速度，不过使用也得看场合。有时候需要懒加载，提升首页加载速度，一般是页面层级较为复杂的时候。

    返回路由组件函数，只有执行函数才会被加载路由组件，这个函数在请求对应的路由时才会执行

例:

import   goods from './page/goods/goods'


const goods = () => import('./page/goods/goods')

 

三.图片懒加载

当网路较慢加载图片时，可以用图片懒加载，优化用户体验

1）下载 

npm i vue-lazyload -S

2)引用

main.js：

import VueLazyload from 'vue-lazyload'
//引用loading图片
import loading from './common/image/loading.gif'

Vue.use(VueLazyload)


Vue.use(VueLazyload, {
 
 
  loading
 
})

在页面中引用

<img v-lazy="food.image">

四.自定义过滤日期

1）下载 

npm install --save moment

2)  filter.js

import  Vue from 'vue'
import  moment from 'moment'


//自定义过滤器
Vue.filter('date-format',function(value,formatStr='YYYY-MM-DD  HH:mm:ss'){

    return moment(value).format(formatStr)
}}

 

3）引用main.js中

import './filter.js'

4)在页面中引用

<div class="time">{{rating.rateTime | date-format}}</div>

效果图如下