在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(&#39;后退。。。&#39;)
  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>

上面是我整理給大家的，希望未來會對大家有幫助。

相關文章：

詳細講解有關實作react伺服器渲染問題

利用jquery如何寫出PC端輪播圖（詳細教程）

在Vue中透過header元件如何開發（詳細教學）

以上是在vue中如何才能實現前進刷新後退不刷新效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！