vue组件开发中如何让返回上一页（go(-1)）被缓存？

Question

假设有3个路由:a,b,c。
需求
默认显示 A
A可以跳转到B，
B可以跳转到C，
这里C返回（go(-1)）B不刷新，
B返回A（go(-1)）不刷新。
要如何实现？

Answer 1

vue有个keep-alive组件

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

定义路由的地方meta属性加个keepAlive属性就可以了,下面写法页面A就会被缓存，B不会

{
    name: 'A',
    path: '/A',
    meta: {
      keepAlive: true
    },
    component: A
},
{
    name: 'B',
    path: '/B',
    meta: {
      keepAlive: false
    },
    component: B
}, 

keep-alive组件

Answer 2

go(-1)并没有刷新页面，只是重新调用了一次mounted和created函数，你可以在这两个函数里面控制，假设A页面是列表页,B页面是详情页。A页面在created里面获取列表数据，当从B页面返回时，又重新调用了A页面的created。此时做个限制就行了，就是A页面在第一次获取到列表数据的时候给个状态 isLoaded =true（初始值给false）,然后A页面created获取数据的时候就判断这个isLoaded，如果为true就不获取数据。

仅提供思路，写的不好请见谅

Answer 3

楼上的答案可能是笔误，修正一下：

//早起版本大部分是这样用的,通过两个router-view去使用，在路由配置中配置meta属性，控制缓存的路由组件
<keep-alive>
  <router-view v-if="$route.meta.keepAlive"></router-view> //这里不是router-link
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

不过在2.1的版本后keep-alive增加了一个include的属性：

<keep-alive include="a,b"> //这里的a,b为组件的name
  <router-view></router-view>
</keep-alive>

想要缓存的直接写到include的属性中即可。include的也可以是正则表达式或者是数组