第一步尼夺，在App.vue文件下加入keep-alive
剛開(kāi)始我也是看的網(wǎng)上但是大多數(shù)是這樣的
<div id="app">
<!-- 可以被緩存的視圖組件 -->
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<!-- 不可以被緩存的視圖組件 -->
<keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
<keep-alive>
</div>
一開(kāi)始我也是按照這樣來(lái)的后面發(fā)現(xiàn)從列表頁(yè)跳轉(zhuǎn)到列表詳情頁(yè)的時(shí)候再返回第一次是沒(méi)問(wèn)題的，但是你點(diǎn)擊其他列表跳到詳情頁(yè)的時(shí)候，詳情頁(yè)面還是前面的那個(gè)詳情頁(yè)面怔蚌，從列表頁(yè)傳來(lái)的參數(shù)也沒(méi)變化琼娘，后面就把下面那個(gè)判斷刪除才可以了预侯，所以這里看自己項(xiàng)目需求
<div id="app">
<!-- 可以被緩存的視圖組件 -->
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<!-- 不可以被緩存的視圖組件 -->
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
第二步 在路由文件中 ：router/index.js绽左，給被要被緩存的頁(yè)面設(shè)置 meta 屬性（這里就是列表頁(yè)），不需要緩存的視圖履怯，不用添加
{
path: 'management',
name: 'Management',
component: Management,
meta:{
keepAlive: true //此頁(yè)面需要緩存
}
}
第三步回还，在詳情頁(yè)里面設(shè)置 beforeRouteLeave
beforeRouteLeave(to,from,next){
//設(shè)置下一個(gè)路由的meta,讓列表頁(yè)面緩存,即不刷新
to.meta.keepAlive = true
next()
}
第四步， 實(shí)現(xiàn)滾動(dòng)行為的代碼：router/index.js
scrollBehavior(to,from,savePosition){
if(savePosition){
//解決頁(yè)面從列表頁(yè)跳轉(zhuǎn)到詳情頁(yè)返回,初始在原來(lái)位置
return savePosition
}else{
//解決頁(yè)面跳轉(zhuǎn)后頁(yè)面高度和前一個(gè)頁(yè)面高度一樣
return {x:0,y:0}
}
}
這樣我們就把這個(gè)需求給解決了叹洲。
