在vue中實現禁止回退上一步,路由不存歷史記錄
阿新 • • 發佈:2020-07-22
在有些情況下,我們不想往路由裡新增歷史記錄。(vue的專案,vue-router中不想存歷史記錄)
根據vue官網提供的,樓主總結了一下,主要有以下幾種方案:
根據官網的解釋 。宣告式路由和程式設計式路由都是新增新的記錄,同時vue還提供了replace來替換路由記錄,從而實現路由不存歷史記錄的情況,以下是樓主總結的幾種方法:
1、宣告式路由
2、程式設計式
3、原生js實現
樓主晚上回去看了一下<js高程>,原生實現替換路由,不記錄歷史記錄的方法
window.open("http://www.baidu.com.......");
會往路由歷史中新增一條記錄(還有第二個引數,大家可自幾去檢視,在dom第7章)
window.location.replace("http://www.baidu.com.......");
會替換之前的歷史記錄,不會新增歷史記錄
補充知識:vue 回退 不重新整理 快取問題 從A頁跳到B頁,快取A頁,當B再次返回A時,頁面不重新整理
我就廢話不多說了,大家還是直接看程式碼吧~
//在index.js中 { path: '/SearchContent',name: 'SearchContent',component: SearchContent,meta: { keepAlive: false,//此元件不需要被快取 isBack:false } },{ path: '/Shop',name: 'Shop',component: Shop,isBack:false//判斷上一個頁面 } },//在searchContent中 beforeRouteEnter(to,from,next) { // 設定下一個路由的 meta if(from.name == 'Shop'){ to.meta.isBack = true; to.meta.keepAlive = true; } // 讓 A 快取,即不重新整理 next(); },components:{ "app-brands":Brand },//注意activated只能在keep-alive元件中呼叫 activated() { if(!this.$route.meta.isBack){ // 如果isBack是false,表明需要獲取新資料,否則就不再請求,直接使用快取的資料 this.getData(); this.getTree(); } // 恢復成預設的false,避免isBack一直是true,導致下次無法獲取資料 this.$route.meta.isBack=false },//在進入頁面時呼叫介面請求資料,當資料請求完成,第二次進入頁面時,就會執行activated函式 mounted(){ this.getData() this.getTree() },
以上這篇在vue中實現禁止回退上一步,路由不存歷史記錄就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。