Vue如何使用History記錄上一頁面的數(shù)據(jù)方法

小編給大家分享一下Vue如何使用History記錄上一頁面的數(shù)據(jù)方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

前言

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

需求

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

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

技術(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()
 {`eturn`
`{`
`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)：

`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>），很棒）：

FAQ

需要使用history.replaceState方式是因?yàn)椋核粫?huì)將更改后的url壓到history棧中，所以不會(huì)增加回退和前進(jìn)的操作步數(shù)；
使用history.replaceState方式，可存儲(chǔ)的state大小不能操作640k

以上是“Vue如何使用History記錄上一頁面的數(shù)據(jù)方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！