vue實現前進重新整理後退不重新整理效果，vue前進後退重新整理

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>

總結

以上所述是小編給大家介紹的vue實現前進重新整理後退不重新整理效果，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對幫客之家網站的支援！