vue vant实现前进刷新，后退不刷新

需求：在一个vue的项目中，从一个列表页面点击列表中的某一个详情页面，从详情页面返回不刷新列表，而从列表的上一个页面重新进入列表页面则需要刷新列表。

而浏览器的机制则是每一次的页面打开都会重新执行所有的程序，所以这个功能并不能直接实现。而vue-router给我们提供了一个叫scrollBehavior的回调函数，我们可以用这个方法结合keep-alive能很好的实现这个功能，下面附上实现代码：

首先我们创建forward、back两个页面，在路由的meta属性中添加需要缓存的页面标识(isKeepAlive)：

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

const routes = [
  {
    path: "/forward",
    name: "forward",
    component: () =>
      import("../views/forward.vue"),
    meta: {
      isKeepAlive: true,
    },
  },
  {
    path: "/back",
    name: "back",
    component: () =>
      import("../views/back.vue"),
    meta: {
      isKeepAlive: true,
    },
  },
];

然后修改app.vue页面：

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

最后我们添加new Router方法的scrollBehavior的回调处理方法：

const router = new VueRouter({
  routes,
  scrollBehavior(to, from, savedPosition) {
    // 从第二页返回首页时savedPosition为undefined
    if (savedPosition || typeof savedPosition === "undefined") {
      // 只处理设置了路由元信息的组件
      from.meta.isKeepAlive =
        typeof from.meta.isKeepAlive === "undefined" ? undefined : false;
      to.meta.isKeepAlive =
        typeof to.meta.isKeepAlive === "undefined" ? undefined : true;
      if (savedPosition) {
        return savedPosition;
      }
    } else {
      from.meta.isKeepAlive =
        typeof from.meta.isKeepAlive === "undefined" ? undefined : true;
      to.meta.isKeepAlive =
        typeof to.meta.isKeepAlive === "undefined" ? undefined : false;
    }
  },
});

在scrollBehavior方法中的savedPosition参数，每一次点击进去的值为null，而点击浏览器的前进与后退则会返回上一次该页面离开时候的pageXOffset与pageYOffset的值，然后我们可以根据这个返回的值来修改路由信息里面的isKeepAlive值来控制是否显示缓存。

大功告成！