一、vue实现页面缓存
　　在vue中，许多组件需要实时刷新，譬如详情页。但有时候某些组件不需要重复渲染，譬如信息列表页。此时，我们可以使用<keep-alive>标签，实现组件缓存。写法如下，在app.vue文件中：

<template>
  <div id="app">
    <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

在router文件夹下的index.js中，给list页面的路由meta配置对应参数keepAlive值为true，即可针对性缓存list页面：

const routers = [
  {
    path: '/list',
    meta: {title: '列表页',keepAlive:true},
    component: (resolve) => require(['../pages/list'], resolve),
  },
  {
    path: '/detail',
    meta: {title: '详情页'},
    component: (resolve) => require(['../pages/detail'], resolve),
  },
];
export default routers;

二、实现列表页的进入刷新，返回不刷新与按需刷新
　　在缓存了列表页进入详情页之后，进入详情页修改了列表页数据，此时再返回列表页时，就需要对列表页进行刷新。
　　我们可以通过beforeRouteEnter以及beforeRouteLeave两个钩子来实现需求。在详情页执行以下代码：

  beforeRouteEnter:function(to,from,next){
    // 页面状态初始化
    to.meta.refresh = false;//默认返回列表页时，列表页不执行刷新
    from.meta.keepAlive = true;//列表页默认缓存
    console.log(to.meta);
    console.log(from.meta);
    next();
  },
  beforeRouteLeave:function(to,from,next){
    if(from.meta.refresh) to.meta.keepAlive = false;//默认返回列表页时，列表页执行刷新
    console.log(to.meta);
    console.log(from.meta);
    next();
  },
  methods: {
    reload(){
      this.$route.meta.refresh = true;//返回列表页时，列表页执行刷新
    },
  }

　　当进入详情页时，初始化页面状态，处于默认返回列表页时，列表页不执行刷新、列表页默认缓存状态。当在详情页执行了数据操作后，调用reload()方法，将列表页的缓存状态改为false，即可实现返回列表页后刷新。

 三、其他方式
　　我们也可以使用<keep-alive>标签的key值，实现页面缓存及刷新。当我们需要刷新列表时，在跳转时多传一个随机字符串，页面就能重新加载了。在app.vue中：

<template>
  <div id="app">
    <keep-alive>
        <router-view v-if="$route.meta.keepAlive" :key="$route.fullPath"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

　　在详情页中：

methods: {
　　goBack(){
　　　　this.$router.push({
          path: '/list',
          query: {'random': Math.random()},
      })
　　},
}

　　返回上一页时，调用goBack()方法即可，这个方法更加简单快捷。而缺陷是：会在url中看到随机字符串，而且会缓存多个不同key的列表页，会占用更多内存。