這篇文章主要介紹了vue實現前進刷新，後退不刷新效果,即加載過的界面能緩存起來（返回不用重新加載），關閉的界面能被銷毀掉（再進入時重新加載）。本文跟大家分享實現思路，需要的朋友可以參考下
最近在用vue嘗試著做行動端的專案。希望實現前進刷新、後退不刷新的效果。即載入過的介面能快取起來（返回不用重新載入），關閉的介面能被銷毀掉（再進入時重新載入）。例如對a->b->c 前進（b,c）刷新，c->b->a 後退（b,a）不刷新。
由於 keep-alive 會把所有載入的過的介面都快取起來，沒法實現返回時將介面銷毀掉，導致再進入時沒有重新載入這個介面。於是首先想到的方案是在點擊介面上回傳按鈕的時候，呼叫 this.$destroy(true) 來將介面銷毀掉。但是在行動端 android裝置上會有實體回傳鍵，如果透過實體回傳鍵回傳的話，就沒辦法處理了。雖然可以重寫android的回傳事件，來呼叫js的方法，但呼叫的是js的全域方法，沒辦法具體讓在最上層的那個介面銷毀掉。
於是就需要另闢蹊徑了。還好這篇文章給了我啟發 vue-router 之 keep-alive ，多謝作者的分享。
要是能夠知道路由是前進還是後退就好了，這樣的話我就能在後退的時候讓from 路由的keepAlive 置為false ， to 路由的keepAlive 置為ture ，就能在再次前進時，重新載入之前這個keepAlive 被置為false 的路由了。
廢話不多說了，這裡模擬有三個介面 login 到 server 到 main 。
首先我給這三個介面路由的 path 設定了嚴格的層級關係 ，並設定keepAlive都是true，預設都是需要快取。
const router = new Router({
routes: [
{
path: '/',
redirect: '/login'
},
{
path: '/login',
component: Login,
meta: {
keepAlive: true
}
},
{
path: '/login/server',
component: ServerList,
meta: {
keepAlive: true
}
},
{
path: '/login/server/main',
component: Main,
meta: {
keepAlive: true
}
}
]
})由於這三個介面path的層級不同，我就能透過 beforeEach 這個鉤子判斷出什麼時候是後退了。在後退時將 from 路由的 keepAlive 設為 false ， to 路由的 keepAlive 設為 ture 。
router.beforeEach((to, from, next) => {
const toDepth = to.path.split('/').length
const fromDepth = from.path.split('/').length
if (toDepth < fromDepth) {
console.log('后退。。。')
from.meta.keepAlive = false
to.meta.keepAlive = true
}
next()
})最後需要快取的介面用keep-alive 包裝起來，就能實現時前進刷新，後退時不刷新的效果了。
<keep-alive>
<router-view v-if="$route.meta.keepAlive">
<!-- 这里是会被缓存的视图组件 -->
</router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive">
<!-- 这里是不被缓存的视图组件 -->
</router-view>以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！
相關推薦：
以上是vue如何實現前進刷新後退不刷新的效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！
