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();

})

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

Answer 1

步骤 3 中 /list/1页面没有缓存并且被重新加载 存在的问题需要查找一些

个人不推荐在路由守卫中修改 meta.keepAlive

你可以尝试吧所需的路由组件设置 keepalive ，并使用组件内守卫的 beforeRouteEnter 进行判断 from 刷新数据