两个以上路由,a->b->c ... 前进时每次进入页面都要请求数据，...c->b->a返回时不再请求数据，读取缓存内容，类似移动端APP的效果。

查阅资料发现目前基本都是靠keep-alive和beforeRouteLeave结合使用的。

<keep-alive>
    <router-view v-if="$route.meta.keepAlive">
        <!-- 这里是会被缓存的视图组件，比如 Home！ -->
    </router-view>
</keep-alive>

<router-view v-if="!$route.meta.keepAlive">
    <!-- 这里是不被缓存的视图组件，比如 Edit！ -->
</router-view>

// routes 配置
export default [
  {
    path: '/',
    name: 'home',
    component: Home,
    meta: {
      keepAlive: true // 需要被缓存
    }
  }, {
    path: '/:id',
    name: 'edit',
    component: Edit,
    meta: {
      keepAlive: false // 不需要被缓存
    }
  }
]

export default {
    data() {
        return {};
    },
    methods: {},
    beforeRouteLeave(to, from, next) {
         // 设置下一个路由的 meta
        to.meta.keepAlive = true;  // 让 A 缓存，即不刷新
        next();
    }
};

以上代码都出自简书上下面这个大佬的文章

作者：RoamIn
链接：http://www.jianshu.com/p/0b0222954483
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

测试后发现对于a->b b->a 这种，两个路由之间的前进后退很有效果，但是对于超过两个的路由，我就做不出来了，我也向简书的这个作者提问了，不过暂未收到回复。

可能是我还没有领悟上面这种方法的要领，所以在此提问，各位大佬，对于这种多路由前进后退缓存问题如何解决。