前言

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

UI

需求

從列表頁的第二頁進(jìn)入詳情頁，返回時(shí)列表頁仍然顯示在第二頁；

從列表頁的第二頁進(jìn)入詳情頁，返回時(shí)列表頁的篩選條件仍然存在。

<!--more-->

技術(shù)選擇

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

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

開關(guān)

為分頁組件添加一個(gè)開關(guān)（openroute），因?yàn)樾枰叶壬暇€，萬一有問題，要調(diào)整的頁面也只有一個(gè)。代碼如下：

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

分頁組件中存儲(chǔ)頁碼和選擇條件&獲取頁碼

<script>
 export default {
 methods: {
 fetchData(page) {
 //請(qǐng)求參數(shù)
 let params = this.params;
 //請(qǐng)求頁碼
 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)) { //選擇條件變更則請(qǐng)求第一頁
  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;
 }
 //請(qǐng)求數(shù)據(jù)，獲得結(jié)果，傳遞給列表頁面
 }
 }
 }
</script>

列表頁面獲取選擇條件

目前可能是因?yàn)榭蚣茉O(shè)計(jì)的問題，沒法在請(qǐng)求數(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>

已解決，初始變量不需要?jiǎng)?，可以通過以下方式實(shí)現(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)了（因?yàn)橹笆峭ㄟ^Object.assign(true, this.form, history.state)方式實(shí)現(xiàn)數(shù)據(jù)賦值的，但是并沒有成功）。下面做個(gè)小總結(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>），很棒）：

m.fzitv.net/article/150037.htm...

FAQ

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

Demo Or Source

因?yàn)槭枪卷?xiàng)目，所以目前沒有Demo或源碼

參考文章

Manipulating the browser history

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

最新評(píng)論