資訊專欄INFORMATION COLUMN
摘要：使用開始支持，通過方式，將頁碼作為參數(shù)存儲(chǔ)在中，將選擇條件存儲(chǔ)在中尚不清楚數(shù)據(jù)具體是存儲(chǔ)在哪里通過方式獲取頁碼通過方式獲取存儲(chǔ)的選擇條件。具體實(shí)現(xiàn)技術(shù)選擇開關(guān)為分頁組件添加一個(gè)開關(guān)，因?yàn)樾枰叶壬暇€，萬一有問題，要調(diào)整的頁面也只有一個(gè)。
這篇文章主要給大家介紹了關(guān)于Vue利用History記錄上一頁面的數(shù)據(jù)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
前言
本文主要介紹的是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è)。代碼如下：
``
分頁組件中存儲(chǔ)頁碼和選擇條件&獲取頁碼
``
列表頁面獲取選擇條件
目前可能是因?yàn)榭蚣茉O(shè)計(jì)的問題，沒法在請(qǐng)求數(shù)據(jù)之前通過Object.assign方式為替換初始變量，所以先這樣處理（笨方法，各位大佬有解決辦法麻煩指導(dǎo)下，謝謝）：
``
已解決，初始變量不需要?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
分析（這篇文章有源碼分析（ 求解答：WebStorm中如何關(guān)聯(lián)源碼？），很棒）：
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或源碼
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/108725.html
摘要：使用開始支持，通過方式，將頁碼作為參數(shù)存儲(chǔ)在中，將選擇條件存儲(chǔ)在中尚不清楚數(shù)據(jù)具體是存儲(chǔ)在哪里通過方式獲取頁碼通過方式獲取存儲(chǔ)的選擇條件。具體實(shí)現(xiàn)技術(shù)選擇開關(guān)為分頁組件添加一個(gè)開關(guān)，因?yàn)樾枰叶壬暇€，萬一有問題，要調(diào)整的頁面也只有一個(gè)。 這篇文章主要給大家介紹了關(guān)于Vue利用History記錄上一頁面的數(shù)據(jù)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)...
摘要：另外該事件只針對(duì)同一個(gè)文檔，如果瀏覽歷史的切換，導(dǎo)致加載不同的文檔，該事件不會(huì)被觸發(fā)使用的時(shí)候，可以為事件指定回調(diào)函數(shù)或者回調(diào)函數(shù)的參數(shù)是一個(gè)事件對(duì)象，它的屬性指向和方法為當(dāng)前所提供的狀態(tài)對(duì)象即這兩個(gè)方法的第一個(gè)參數(shù)。 history window.history(可直接寫成history)指向History對(duì)象，它表示當(dāng)前窗口的瀏覽歷史。History對(duì)象保存了當(dāng)前窗口訪問過的所有頁...
摘要：方法與方法不同之處在于，它并不是將新路由添加到瀏覽器訪問歷史棧頂，而是替換掉當(dāng)前的路由可以看出，它與的實(shí)現(xiàn)結(jié)構(gòu)基本相似，不同點(diǎn)它不是直接對(duì)進(jìn)行賦值，而是調(diào)用方法將路由進(jìn)行替換。 隨著前端應(yīng)用的業(yè)務(wù)功能起來越復(fù)雜，用戶對(duì)于使用體驗(yàn)的要求越來越高，單面（SPA）成為前端應(yīng)用的主流形式。大型單頁應(yīng)用最顯著特點(diǎn)之一就是采用的前端路由系統(tǒng)，通過改變URL，在不重新請(qǐng)求頁面的情況下，更新頁面視圖。...
閱讀 3458·2021-11-24 09:38
閱讀 1443·2021-11-22 15:08
閱讀 1543·2021-09-29 09:35
閱讀 552·2021-09-02 15:11
閱讀 1362·2019-08-30 12:55
閱讀 439·2019-08-29 17:16
閱讀 555·2019-08-29 11:30
閱讀 476·2019-08-26 13:23
