在Vue中如何缓存页面

在Vue中经常会遇到需要缓存页面的情况，如果不对Vue进行处理，那么Vue默认是不会缓存页面的。例如从菜谱列表界面进入到菜谱的详情页后，再从菜谱详情页中返回到菜谱列表页面中时，菜谱列表是不需要进行刷新的，一个是增加了不必要的网路请求，第二个是如推荐菜谱后台是实时推荐的，每次请求的数据都不一定一样的，这样在用户退出后甚至找不到之前的进入位置，造成了很不好的用户体验。类似的情况还有很多，那么如何在Vue中控制页面是否刷新呢？

菜谱列表页.jpg

菜谱详情页图1.jpg

• 公共处理
  首先需要在App.vue进行处理，通过meta中keepAlive字段进行区分；当需要缓存页面时，用便签进行包裹，并将v-if绑定路由中meta.keepAlive属性，同时别忘了设置不需要缓存的，通过v-if绑定meta.keepAlive的取反值。

设置方法

1. 方法一 直接在路由文件中进行设置：
   在路由列表中，找到需要缓存的页面，设置meta对象，将keepAlive设置为true，如下

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
    meta: { keepAlive: true }
  },
  {
    path: "/cookbookInfo",
    name: "cookbookInfo",
    component: cookbookInfo
  }
];

2. 方法二 在路由守卫中，拦截对应的页面，通过代码设置其对应meta中keepAlive属性

router.beforeEach((to, from, next) => {
  console.log("即将跳转，原路由 ------------------------ >  " + from.name);
  if (from.name === "Home") {
    from.meta.keepAlive = true;
  } else {
    from.meta.keepAlive = false;
  }
  next();
});

注意：以上两种方法都可以对路由是否缓存进行设置，如果不论何种情况下都要缓存页面，可以直接采用第一种方法，当然第二种情况同样可以满足情况；但是如果需要区分从不同页面跳转的情况来确定是否需要缓存的话，就需要用到第二种方法。