vue中keepAlive的用法[返回页面不刷新]

本文转载于時間蒼白了誓言_49b9

使用vue单页开发项目时遇到一个问题：在列表页进入详情页，按返回键返回列表页时页面刷新了，用户体验非常差啊！！！查阅了一下相关问题，使用解决这个问题，下面是我的使用心得。

是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。

1.在app.vue页面中把替换成下图所示：

<keep-alive>
      <router-view v-if="$route.meta.keepLive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepLive"></router-view>

2.在router中的index.js中，路由配置下加一个meta属性：

{
      path: '/',
      component: () => import(/* webpackChunkName: 'day-report' */ './views/index.vue'),
      meta: {
        keepLive: !0
      }
    },

我的需求是，列表页面到列表详情页跳转后，从详情页回来之后，列表页面不刷新

注意：哪个页面需要缓存，哪个页面加上就行，不需要的不用写

3.在列表详情页，加入下图所示内容：

注意：下面内容加上之后，想要的效果是实现了，但是出现另一个问题，就是无论哪个页面跳到这个列表页面，都不会刷新，显然和所要求的不同。所以需要第四步：

beforeRouteLeave(to, from, next) {
    if (to.path === '/') {
      if (!from.meta.keepLive) {
        from.meta.keepLive = !0;
      }
    } else {
      from.meta.keepLive = !1;
      to.meta.keepLive = !1;
      this.$destroy();
    }
    next();
  },

4.在列表页加入如下图所示：

需要判断下，如果页面来源是详情页的话，就缓存，

否则，就不缓存，刷新。

beforeRouteLeave(to, from, next) {
    if (to.path === '/day') {
      from.meta.keepLive = !0;
    } else {
      from.meta.keepLive = !1;
      this.$destroy();
    }
    next();
  },

beforeRouterLeave必须写在有配置路由的页面上才有效的。具体使用方法，可以参考官方文档。