快捷導(dǎo)航

vue實(shí)現(xiàn)前進(jìn)刷新后退不刷新效果

更新時(shí)間：2018年01月26日 09:08:46 作者：iceuncle

這篇文章主要介紹了vue實(shí)現(xiàn)前進(jìn)刷新，后退不刷新效果,即加載過的界面能緩存起來(lái)（返回不用重新加載），關(guān)閉的界面能被銷毀掉（再進(jìn)入時(shí)重新加載）。本文給大家分享實(shí)現(xiàn)思路，需要的朋友可以參考下

最近在用vue嘗試著做移動(dòng)端的項(xiàng)目。希望實(shí)現(xiàn)前進(jìn)刷新、后退不刷新的效果。即加載過的界面能緩存起來(lái)（返回不用重新加載），關(guān)閉的界面能被銷毀掉（再進(jìn)入時(shí)重新加載）。例如對(duì)a->b->c 前進(jìn)（b,c）刷新，c->b->a 后退（b,a）不刷新。

由于 keep-alive 會(huì)把所有加載的過的界面都緩存起來(lái)，沒法實(shí)現(xiàn)返回時(shí)將界面銷毀掉，導(dǎo)致再進(jìn)入時(shí)沒有重新加載這個(gè)界面。于是首先想到的方案是在點(diǎn)擊界面上返回按鈕的時(shí)候，調(diào)用 this.$destroy(true) 來(lái)將界面銷毀掉。但是在移動(dòng)端 android設(shè)備上會(huì)有物理返回鍵，如果通過物理返回鍵返回的話，就沒法處理了。雖然可以重寫android的返回事件，來(lái)調(diào)用js的方法，但是調(diào)用的是js的全局方法，沒法具體讓在最上層的那個(gè)界面銷毀掉。

于是就需要另辟蹊徑了。還好這篇文章給了我啟發(fā) vue-router 之 keep-alive ，多謝作者的分享。

要是能夠知道路由是前進(jìn)還是后退就好了，這樣的話我就能在后退的時(shí)候讓 from 路由的 keepAlive 置為 false ， to 路由的 keepAlive 置為 ture ，就能在再次前進(jìn)時(shí)，重新加載之前這個(gè) keepAlive 被置為 false 的路由了。

廢話不多說了，這里模擬有三個(gè)界面 login 到 server 到 main 。

首先我給這三個(gè)界面路由的 path 設(shè)置了嚴(yán)格的層級(jí)關(guān)系，并設(shè)置keepAlive都是true，默認(rèn)都是需要緩存。

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
   }
  }
 ]
})

由于這三個(gè)界面path的層級(jí)不同，我就能通過 beforeEach 這個(gè)鉤子判斷出什么時(shí)候是后退了。在后退時(shí)將 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 包起來(lái)，就能實(shí)現(xiàn)時(shí)前進(jìn)刷新，后退時(shí)不刷新的效果了。

<keep-alive>
     <router-view v-if="$route.meta.keepAlive">
      <!-- 這里是會(huì)被緩存的視圖組件 -->
     </router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive">
     <!-- 這里是不被緩存的視圖組件 -->
    </router-view>

總結(jié)

以上所述是小編給大家介紹的vue實(shí)現(xiàn)前進(jìn)刷新后退不刷新效果，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: