鍍金池/ 問答/網(wǎng)絡(luò)安全  HTML/ vuejs中使用keep-alive,返回上一頁,頁面沒有被緩存

vuejs中使用keep-alive,返回上一頁,頁面沒有被緩存

目前在學(xué)習(xí)vue,練手一個商城,其中有些頁面需要前進(jìn)刷新,后退不刷新。
比如,從商城的【首頁】(index.vue)-->【產(chǎn)品列表頁】(list.vue)-->【產(chǎn)品詳情頁】(detail.vue),依次前進(jìn),每次前進(jìn)到一個新頁面都需要獲取數(shù)據(jù),而按下后退鍵后,從detail返回到list,list不再獲取新數(shù)據(jù),而是使用之前緩存的數(shù)據(jù)。從list返回到index時,index不再獲取新數(shù)據(jù),而是使用之前的數(shù)據(jù)。

首頁運行界面如下:
clipboard.png

列表list的界面和index的推薦商品列表一樣布局。

操作步驟如下:
1.先點擊工具,進(jìn)入工具的/list/1,
2.點擊/list/1中商品進(jìn)入detail,
3.然后點擊detail的返回按鈕回到/list/1頁面,/list/1頁面沒有緩存并且被重新加載,加載后的列表再次點擊商品進(jìn)入detail,然后點擊返回按鈕回到/list/1頁面,這個時候/list/1頁面被緩存的
4.通過工具的list頁面點擊返回按鈕回到index,index頁面被正常緩存,
5.再點擊生活,進(jìn)入生活的/list/2,
6.點擊/list/2中商品進(jìn)入detail,
7.然后點擊detail的返回按鈕回到list頁面,這時候返回的卻是/list/1頁面而不是/list/2的頁面

我使用keep-alive來進(jìn)行緩存,但是卻不能進(jìn)行緩存最新數(shù)據(jù)。具體配置是這樣的:
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里面進(jìn)行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();

})

請問我該怎么解決出現(xiàn)的這個這個問題啊~~

回答
編輯回答
浪婳

步驟 3 中 /list/1頁面沒有緩存并且被重新加載 存在的問題需要查找一些

個人不推薦在路由守衛(wèi)中修改 meta.keepAlive

你可以嘗試吧所需的路由組件設(shè)置 keepalive ,并使用組件內(nèi)守衛(wèi)的 beforeRouteEnter 進(jìn)行判斷 from 刷新數(shù)據(jù)

2018年4月21日 14:20