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(&#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>

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

jQuery程式碼最佳化方式的摘要

#360瀏覽器相容模式的頁面顯示不全怎麼處理

box-reflect實作倒影效果

#

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