這次帶給大家vue實現前進刷新效果，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中文網其他相關文章！
