??最近在項目中遇到這樣一個需求:
??有三個頁面:a->b->c,a頁面點擊鏈接前進(jìn)到b頁面坝锰,b頁面點擊鏈接前進(jìn)到 c頁面洪灯,從c頁面按瀏覽器的后退鍵世囊,可以c->b->a依次返回哭廉。要求前進(jìn)的時候頁面刷新战虏,后退時頁面不刷新(不發(fā)請求萍丐,頁面內(nèi)容不變轩端,滾動條位置也不變)
??一開始嘗試用vue里的keep-alive解決,但沒成功逝变。網(wǎng)上大部分的解決方案是用keep-alive配合router-view基茵,keep-alive適合a->b奋构,b->a這種二級頁面的返回,但三級及以上就不合適了拱层,寫起來會很麻煩而且不通用弥臼。
??經(jīng)過幾天的查資料,最終找到了解決辦法:使用vue-navigation插件根灯【睹澹基礎(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>
這些基本就夠用了,想了解更多請看原文檔:https://github.com/zack24q/vue-navigation烙肺。
??感謝vue-navigation的作者zack24q纳猪,@zack24q
??感謝https://cnodejs.org/topic/5981617528607f916122dba8此貼作者,感謝16樓的回答茬高。