最近在用vue嘗試著做移動端的項目。希望實現前進刷新、后退不刷新的效果。即加載過的界面能緩存起來（返回不用重新加載），關閉的界面能被銷毀掉（再進入時重新加載）。例如對a->b->c 前進（b,c）刷新，c->b->a 后退（b,a）不刷新。

創新互聯公司是專業的海倫網站建設公司，海倫接單;提供網站設計制作、成都網站制作,網頁設計,網站設計,建網站,PHP網站建設等專業做網站服務;采用PHP框架,可快速的進行海倫網站開發網頁制作和功能擴展;專業做搜索引擎喜愛的網站,專業的做網站團隊,希望更多企業前來合作!

由于 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實現前進刷新后退不刷新效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對創新互聯網站的支持！

本文名稱：vue實現前進刷新后退不刷新效果
本文URL：http://m.newbst.com/article14/gcspge.html

成都網站建設公司_創新互聯，為您提供定制網站、企業網站制作、微信小程序、ChatGPT、域名注冊、小程序開發

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯