解決多級(jí)頁(yè)面前進(jìn)刷新后退不刷新問(wèn)題(vue)

??最近在項(xiàng)目中遇到這樣一個(gè)需求:
??有三個(gè)頁(yè)面:a->b->c,a頁(yè)面點(diǎn)擊鏈接前進(jìn)到b頁(yè)面,b頁(yè)面點(diǎn)擊鏈接前進(jìn)到 c頁(yè)面,從c頁(yè)面按瀏覽器的后退鍵,可以c->b->a依次返回。要求前進(jìn)的時(shí)候頁(yè)面刷新,后退時(shí)頁(yè)面不刷新(不發(fā)請(qǐng)求,頁(yè)面內(nèi)容不變,滾動(dòng)條位置也不變)
??一開(kāi)始嘗試用vue里的keep-alive解決,但沒(méi)成功。網(wǎng)上大部分的解決方案是用keep-alive配合router-view,keep-alive適合a->b,b->a這種二級(jí)頁(yè)面的返回,但三級(jí)及以上就不合適了,寫(xiě)起來(lái)會(huì)很麻煩而且不通用。
??經(jīng)過(guò)幾天的查資料,最終找到了解決辦法:使用vue-navigation插件?;A(chǔ)用法:

npm i -S vue-navigation

main.js:

import Vue from 'vue'
import router from './router' // vue-router instance
import Navigation from 'vue-navigation'

Vue.use(Navigation, {router})

App.vue

<template>
  <navigation>
    <router-view></router-view>
  </navigation>
</template>

這些基本就夠用了,想了解更多請(qǐng)看原文檔:https://github.com/zack24q/vue-navigation。
??感謝vue-navigation的作者zack24q,@zack24q
??感謝https://cnodejs.org/topic/5981617528607f916122dba8此貼作者,感謝16樓的回答。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀(guān)點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容