vuejs中使用keep-alive，返回上一页，页面没有被缓存

Question

目前在学习vue，练手一个商城，其中有些页面进入获取数据后，再进入下一级页面，回退之后就不用重新获取数据了。
比如，从商城的【首页】(index.vue)-->【产品列表页】(list.vue)-->【产品详情页】(detail.vue)，依次进入，每次进入一个新页面需要获取数据，而返回之后，比如从detail返回到list，list不用再获取新数据，而是使用之前缓存的数据。从list返回到index时，index也不再获取新数据，而是使用之前的数据。
首页运行界面如下：

列表list的界面和index的推荐商品列表一样布局。

操作步骤如下：
1.先点击工具，进入工具的/list/1，
2.点击/list/1中商品进入detail，
3.然后点击detail的返回按钮回到/list/1页面，/list/1页面没有缓存并且被重新加载，加载后的列表再次点击商品进入detail，然后点击返回按钮回到/list/1页面，这个时候/list/1页面被缓存的
4.通过工具的list页面点击返回按钮回到index,index页面被正常缓存，
5.再点击生活，进入生活的/list/2，
6.点击/list/2中商品进入detail，
7.然后点击detail的返回按钮回到list页面，这时候返回的却是/list/1页面而不是/list/2的页面
我使用keep-alive来进行缓存，但是却不能进行缓存最新数据。具体配置是这样的：
index.js:
`routes: [{

    path: '/index',
    name: 'index',
    component: Index,
    meta: {
        title: '商城',
        keepAlive: true, // 此组件需要被缓存
    }
},
{
    path: '/list/:id',
    name: 'list',
    component: List,
    meta: {
        title: '',
        keepAlive: true, // 此组件需要被缓存
    }
},
{
    path: '/detail/:id',
    name: 'detail',
    component: Detail,
    meta: {
        title: '商品详情',
        keepAlive: false, // 此组件需要被缓存
    }
}]`

`App.vue：
<div id="app">

<keep-alive>
    <router-view v-wechat-title='$route.meta.title' v-if="$route.meta.keepAlive" />
</keep-alive>
<router-view v-wechat-title='$route.meta.title' v-if="!$route.meta.keepAlive" /></div>`

我在main.js里面进行router的拦截：
router.beforeEach((to, from, next) => {
if(from.name == 'index' && to.name == 'list'){
     to.meta.keepAlive = false;
}if(from.name == 'list' && to.name == 'index'){
     from.meta.keepAlive = false;
}if(from.name == 'list' && to.name == 'detail'){
     from.meta.keepAlive = true;
}if(from.name == 'detail' && to.name == 'list'){
     to.meta.keepAlive = true;
}
console.warn(from.name+' '+to.name +' '+ to.meta.keepAlive);
  next();
}) 

请问我该怎么解决出现的这个这个问题啊~~