Vue利用History記錄上一頁面的數(shù)據(jù)方法實例
前言
本文主要介紹的是Vue利用History記錄上一頁面數(shù)據(jù)的相關(guān)內(nèi)容,vue使用history后,能夠使得url更加漂亮,也就是不再有‘#'的問題,下面話不多說了,來一起看看詳細(xì)的介紹吧
UI
需求
從列表頁的第二頁進(jìn)入詳情頁,返回時列表頁仍然顯示在第二頁;
從列表頁的第二頁進(jìn)入詳情頁,返回時列表頁的篩選條件仍然存在。
<!--more-->
技術(shù)選擇
- 使用vue-router組件,通過
this.$router.push({path: path, query: query});
方式,將頁碼和選擇條件作為參數(shù)存儲在url中,這種方式在上面的UI設(shè)計中是可行的,但是當(dāng)列表頁中包含tab組件時(分頁組件是公用的),會因為push的因素(因為push會打開新頁面)導(dǎo)致一些問題(PS:也可能是本人技術(shù)能力的原因),未實現(xiàn)。 - 使用History API(HTML5開始支持),通過history.replaceState方式,將頁碼作為參數(shù)存儲在url中,將選擇條件存儲在history中(尚不清楚數(shù)據(jù)具體是存儲在哪里);通過
location.hash
方式獲取頁碼;通過history.state
方式獲取存儲的選擇條件。
具體實現(xiàn)--技術(shù)選擇2
開關(guān)
為分頁組件添加一個開關(guān)(openroute),因為需要灰度上線,萬一有問題,要調(diào)整的頁面也只有一個。代碼如下:
<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ù),獲得結(jié)果,傳遞給列表頁面 } } } </script>
列表頁面獲取選擇條件
目前可能是因為框架設(shè)計的問題,沒法在請求數(shù)據(jù)之前通過Object.assign
方式為替換初始變量,所以先這樣處理(笨方法,各位大佬有解決辦法麻煩指導(dǎo)下,謝謝):
<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)被誤導(dǎo)了(因為之前是通過Object.assign(true, this.form, history.state)
方式實現(xiàn)數(shù)據(jù)賦值的,但是并沒有成功)。下面做個小總結(jié):
Object.assign(true, a, b);”和“Object.assign(a, b);”有什么區(qū)別?
結(jié)論:前者:改a不影響b;后者:改a影響b
分析(這篇文章有源碼分析( <font color='red'>求解答:WebStorm中如何關(guān)聯(lián)源碼?</font>),很棒):
www.dbjr.com.cn/article/150037.htm...
FAQ
- 需要使用
history.replaceState
方式是因為:它不會將更改后的url壓到history棧中,所以不會增加回退和前進(jìn)的操作步數(shù); - 使用
history.replaceState
方式,可存儲的state大小不能操作640k; - 可能存在瀏覽器兼容性問題,請從此處查閱:https://caniuse.com/#feat=his...。
Demo Or Source
因為是公司項目,所以目前沒有Demo或源碼
參考文章
Manipulating the browser history
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。
- 解決vue router使用 history 模式刷新后404問題
- 在nginx上部署vue項目(history模式)的方法
- 詳解如何去除vue項目中的#——History模式
- 詳解Vue路由History mode模式中頁面無法渲染的原因及解決
- 詳解如何將 Vue-cli 改造成支持多頁面的 history 模式
- Vue下路由History模式打包后頁面空白的解決方法
- vue router嵌套路由在history模式下刷新無法渲染頁面問題的解決方法
- Vue-router 中hash模式和history模式的區(qū)別
- vue router下的html5 history在iis服務(wù)器上的設(shè)置方法
- vue下history模式刷新后404錯誤解決方法
相關(guān)文章
element日期選擇器el-date-picker樣式圖文詳解
最近寫的項目里面有一個功能是日期選擇功能,第一反應(yīng)是使用element里面的el-date-picker組件,下面這篇文章主要給大家介紹了關(guān)于element日期選擇器el-date-picker樣式的相關(guān)資料,需要的朋友可以參考下2022-09-09Vue3+ts+setup?getCurrentInstance使用時遇到的問題以及解決辦法
getCurrentInstance方法用于獲取當(dāng)前組件實例,僅在setup和生命周期中起作用,下面這篇文章主要給大家介紹了關(guān)于Vue3+ts+setup?getCurrentInstance使用時遇到的問題以及解決辦法,需要的朋友可以參考下2022-08-08vue2使用el-tag實現(xiàn)自定義菜單導(dǎo)航標(biāo)簽
這篇文章主要為大家詳細(xì)介紹了vue2如何使用el-tag實現(xiàn)自定義菜單導(dǎo)航標(biāo)簽,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12vue+el使用this.$confirm,不能阻斷代碼往下執(zhí)行的解決
這篇文章主要介紹了vue+el使用this.$confirm,不能阻斷代碼往下執(zhí)行的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09vue3集成Element-Plus之全局導(dǎo)入和按需導(dǎo)入
這篇文章主要給大家介紹了關(guān)于vue3集成Element-Plus之全局導(dǎo)入和按需導(dǎo)入的相關(guān)資料,element-plus正是element-ui針對于vue3開發(fā)的一個UI組件庫,?它的使用方式和很多其他的組件庫是一樣的,需要的朋友可以參考下2023-07-07解決vue路由組件vue-router實例被復(fù)用問題
這篇文章介紹了解決vue路由組件vue-router實例被復(fù)用的問題,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06