vue路由中前進后退的一些事兒-創(chuàng)新互聯(lián)

前言

創(chuàng)新互聯(lián)建站主打移動網(wǎng)站、做網(wǎng)站、成都網(wǎng)站制作、網(wǎng)站改版、網(wǎng)絡推廣、網(wǎng)站維護、國際域名空間、等互聯(lián)網(wǎng)信息服務，為各行業(yè)提供服務。在技術實力的保障下，我們?yōu)榭蛻舫兄Z穩(wěn)定，放心的服務，根據(jù)網(wǎng)站的內(nèi)容與功能再決定采用什么樣的設計。最后，要實現(xiàn)符合網(wǎng)站需求的內(nèi)容、功能與設計，我們還會規(guī)劃穩(wěn)定安全的技術方案做保障。

最近蒸煮在做一個獨立項目的時候遇到了一個小坑，特此做個爬坑紀念。

基本情景是頁面之間通過vue路由跳轉(zhuǎn)，從頁面A跳轉(zhuǎn)到頁面B（在頁面B進行對應操作后）,再從頁面B跳轉(zhuǎn)到頁面C。之后再從頁面C返回到頁面B，頁面B保留之前狀態(tài)，返回頁面A，頁面B狀態(tài)不保留。(｡･∀･)ﾉﾞ嗨~感覺說的好亂。

總之就是，前進刷新，后退不刷新（刷新是指是否重新渲染）

相信很多小伙伴都會想到用keep-alive開啟緩存頁面來實現(xiàn)，鵝，蒸煮也沒例外，下面就是蒸煮的爬坑過程。

vue路由開啟keep-alive緩存頁面

keep-alive是vue官方提供的一種緩存組件實例的方法。

第一步，先改寫<router-view>的展示方式

<keep-alive>
//這是會被緩存的頁面
 <router-view v-if="$route.meta.keepAlive">
 </router-view></keep-alive>
<router-view v-if = "!$route.meta.keepAlive">
//這里是不被緩存的組件
</router-view>

文章名稱：vue路由中前進后退的一些事兒-創(chuàng)新互聯(lián)
地址分享：http://muchs.cn/article38/djehsp.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、響應式網(wǎng)站、企業(yè)建站、微信公眾號、網(wǎng)站設計、關鍵詞優(yōu)化

廣告

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

網(wǎng)站優(yōu)化排名