??最近在項(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樓的回答。