首頁 > web前端 > js教程 > 主體

Vue用History記錄上一頁的資料方法的程式碼介紹

不言
發布: 2018-11-20 15:20:22
轉載
1855 人瀏覽過

這篇文章主要為大家介紹了關於Vue用History記錄上一頁的資料方法的程式碼介紹,文中透過範例程式碼介紹的非常詳細,需要的朋友們可以參考一下。

前言

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

需求

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

從清單頁的第二頁進入詳情頁,返回時清單頁的篩選條件仍然存在。

技術選擇

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

開關

為分頁元件新增一個開關(openroute),因為需要灰階上線,萬一有問題,要調整的頁面也只有一個。程式碼如下:

`<script>`
`export` `default` `{`
`props: {`
`openroute: {`
`type: Boolean,`
`default``: () => (``true``)`
`}
`},`
`}`
`</script>`
登入後複製

分頁元件中儲存頁碼和選擇條件&取得頁碼

`<script>`
`export` `default` `{`
`methods: {`
`fetchData(page) {`
`/请求参数`
`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;`
`}`
`//请求数据,获得结果,传递给列表页面`
`}`
`}`
`}`
`</script>`
登入後複製

清單頁面取得選擇條件

目前可能是因為框架設計的問題,沒法在請求資料之前透過Object.assign方式為替換初始變量,所以先這樣處理(笨方法,各位大佬有解決辦法麻煩指導下,謝謝):

`<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>`
登入後複製

已解決,初始變量不需要動,可以透過以下方式實現:

`if` `(history.state) {`
`Object.assign(``this``.form, history.state)`
`if` `(``this``.form.key) {`
`delete` `this``.form.key`
`}`
`}`
`},`
登入後複製

這裡記錄下:之前以為created方法是在分頁元件的watch監聽之後執行的,後來發現被誤導了(因為之前是透過Object.assign(true, this .form, history.state)方式實作資料賦值的,但是並沒有成功)。下面做個小總結:

Object.assign(true, a, b);」和「Object.assign(a, b);」有什麼不同?

結論:前者:改a不影響b;後者:改a影響b

分析(這篇文章有源碼分析( 求解答:WebStorm中如何關聯原始碼?

FAQ

需要使用history.replaceState方式是因為:它不會將更改後的url壓到history堆疊中,所以不會增加回退和前進的操作步數;
使用history.replaceState方式,可儲存的state大小不能操作640k

以上是Vue用History記錄上一頁的資料方法的程式碼介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:segmentfault.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!