在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
  }
];
  1. 方法二 在路由守卫中,拦截对应的页面,通过代码设置其对应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();
});

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

你可能感兴趣的:(在Vue中如何缓存页面)