Vue利用History記錄上一頁面的數(shù)據(jù)方法實例

更新時間：2018年11月02日 15:38:26 作者：風清袖一

這篇文章主要給大家介紹了關于Vue利用History記錄上一頁面的數(shù)據(jù)的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

前言

本文主要介紹的是Vue利用History記錄上一頁面數(shù)據(jù)的相關內容，vue使用history后,能夠使得url更加漂亮,也就是不再有‘#'的問題，下面話不多說了，來一起看看詳細的介紹吧

需求

從列表頁的第二頁進入詳情頁，返回時列表頁仍然顯示在第二頁；

從列表頁的第二頁進入詳情頁，返回時列表頁的篩選條件仍然存在。

技術選擇

使用vue-router組件，通過this.$router.push({path: path, query: query});方式，將頁碼和選擇條件作為參數(shù)存儲在url中，這種方式在上面的UI設計中是可行的，但是當列表頁中包含tab組件時（分頁組件是公用的），會因為push的因素（因為push會打開新頁面）導致一些問題（PS：也可能是本人技術能力的原因），未實現(xiàn)。
使用History API（HTML5開始支持），通過history.replaceState方式，將頁碼作為參數(shù)存儲在url中，將選擇條件存儲在history中（尚不清楚數(shù)據(jù)具體是存儲在哪里）；通過location.hash方式獲取頁碼；通過history.state方式獲取存儲的選擇條件。

具體實現(xiàn)--技術選擇2

開關

為分頁組件添加一個開關（openroute），因為需要灰度上線，萬一有問題，要調整的頁面也只有一個。代碼如下：

<script>
 export default {
 props: {
 openroute: {
 type: Boolean,
 default: () => (true)
 }
 },
 }
</script>

分頁組件中存儲頁碼和選擇條件&獲取頁碼

<script>
 export default {
 methods: {
 fetchData(page) {
 //請求參數(shù)
 let params = this.params;
 //請求頁碼
 let newPage;
 //openroute處理
 if (this.openroute) {
 //為url添上#page
 if (page) {
 history.replaceState(params.data, document.title, "#" + page);
 } else {
 if (history.state) {
 if (!history.state.key && location.hash && location.hash.split("#") && location.hash.split("#")[1]) {
 if (JSON.stringify(history.state) !== JSON.stringify(params.data)) { //選擇條件變更則請求第一頁
  history.replaceState(params.data, document.title, "#1");
 } else {
  history.replaceState(params.data, document.title, "#" + location.hash.split("#")[1]);
 }
 } else {
 history.replaceState(params.data, document.title, "#1");
 }
 } else {
 if (location.hash && location.hash.split("#") && location.hash.split("#")[1]) {
 history.replaceState(params.data, document.title, "#" + location.hash.split("#")[1]);
 } else {
 history.replaceState(params.data, document.title, "#1");
 }
 }
 }
 //獲取url后面的#page
 if (location.hash && location.hash.split("#") && location.hash.split("#")[1]) {
 newPage = Number(location.hash.split("#")[1]);
 } else {
 newPage = 1;
 }
 } else {
 newPage = page;
 }
 //請求數(shù)據(jù)，獲得結果，傳遞給列表頁面
 }
 }
 }
</script>

列表頁面獲取選擇條件

目前可能是因為框架設計的問題，沒法在請求數(shù)據(jù)之前通過Object.assign方式為替換初始變量，所以先這樣處理（笨方法，各位大佬有解決辦法麻煩指導下，謝謝）：

<script>
 export default {
 data() {
 return {
 form: {
 aaa: (history.state && history.state.aaa) ? history.state.aaa : null,
 bbb: (history.state && history.state.bbb) ? history.state.bbb : null,
 ccc: (history.state && history.state.ccc) ? history.state.ccc : null
 },
 };
 }
 };
</script>

已解決，初始變量不需要動，可以通過以下方式實現(xiàn)：

created(){
 //獲取緩存的數(shù)據(jù)
 if (history.state) {
 Object.assign(this.form, history.state)
 if (this.form.key) {
 delete this.form.key
 }
 }
},

這里記錄下：之前以為created方法是在分頁組件的watch監(jiān)聽之后執(zhí)行的，后來發(fā)現(xiàn)被誤導了（因為之前是通過Object.assign(true, this.form, history.state)方式實現(xiàn)數(shù)據(jù)賦值的，但是并沒有成功）。下面做個小總結：

Object.assign(true, a, b);”和“Object.assign(a, b);”有什么區(qū)別？

結論：前者：改a不影響b；后者：改a影響b

分析（這篇文章有源碼分析（ <font color='red'>求解答：WebStorm中如何關聯(lián)源碼？</font>），很棒）：

www.dhdzp.com/article/150037.htm...

FAQ

需要使用history.replaceState方式是因為：它不會將更改后的url壓到history棧中，所以不會增加回退和前進的操作步數(shù)；
使用history.replaceState方式，可存儲的state大小不能操作640k；
可能存在瀏覽器兼容性問題，請從此處查閱：https://caniuse.com/#feat=his...。

Demo Or Source

因為是公司項目，所以目前沒有Demo或源碼

參考文章

Manipulating the browser history

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

您可能感興趣的文章:

基于el-table實現(xiàn)行內增刪改功能
這篇文章主要介紹了基于el-table實現(xiàn)行內增刪改功能,用過通過操作按鈕點擊刪除或者編輯功能即可實現(xiàn)相應的效果,下面小編給大家分享實例代碼感興趣的朋友跟隨小編一起看看吧
2024-04-04
el-table表格動態(tài)合并相同數(shù)據(jù)單元格(可指定列+自定義合并)
工作時遇到的el-table合并單元格的需求，本文主要介紹了el-table表格動態(tài)合并相同數(shù)據(jù)單元格(可指定列+自定義合并)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2023-07-07
Vue項目引入translate.js國際化自動翻譯組件的方法
這篇文章主要給大家介紹了關于Vue項目引入translate.js國際化自動翻譯組件的相關資料,除了基本的文本翻譯功能之外,jstranslate還提供了一些高級功能,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2024-01-01
實現(xiàn)vue圖片縮放方式-拖拽組件
這篇文章主要介紹了實現(xiàn)vue圖片縮放方式-拖拽組件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
Vue實現(xiàn)騰訊云點播視頻上傳功能的實現(xiàn)代碼
這篇文章主要介紹了Vue實現(xiàn)騰訊云點播視頻上傳功能的實現(xiàn)代碼,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-08-08
vue3+element-plus暗黑模式切換動畫圓弧過渡效果
文章介紹了如何在Vue 3和Element Plus中實現(xiàn)暗黑模式的切換,并通過動畫和圓弧過渡效果提升用戶體驗,本文給大家介紹的非常詳細,感興趣的朋友一起看看吧
2025-01-01
詳解如何使用webpack打包Vue工程
本篇文章主要介紹了詳解如何使用webpack打包Vue工程，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-05-05
Vue中this.$router和this.$route的區(qū)別及push()方法
這篇文章主要給大家介紹了關于Vue中this.$router和this.$route的區(qū)別及push()方法的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2021-05-05
一文讀懂vue動態(tài)屬性數(shù)據(jù)綁定（v-bind指令）
這篇文章主要介紹了vue動態(tài)屬性數(shù)據(jù)綁定（v-bind指令）的相關資料，文中講解非常細致，代碼幫助大家更好的理解和學習，感興趣的朋友可以了解下
2020-07-07
Vue3除了keep-alive還有哪些實現(xiàn)頁面緩存詳解
Vue3中的keep-alive組件用于緩存頁面,以便在切換頁面時保留其狀態(tài),下面這篇文章主要給大家介紹了關于Vue3除了keep-alive還有哪些實現(xiàn)頁面緩存的相關資料,需要的朋友可以參考下
2024-04-04