資訊專欄INFORMATION COLUMN
摘要：使用開始支持，通過方式，將頁碼作為參數存儲在中，將選擇條件存儲在中尚不清楚數據具體是存儲在哪里通過方式獲取頁碼通過方式獲取存儲的選擇條件。具體實現技術選擇開關為分頁組件添加一個開關，因為需要灰度上線，萬一有問題，要調整的頁面也只有一個。
這篇文章主要給大家介紹了關于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），因為需要灰度上線，萬一有問題，要調整的頁面也只有一個。代碼如下：
``
分頁組件中存儲頁碼和選擇條件&獲取頁碼
``
列表頁面獲取選擇條件
目前可能是因為框架設計的問題，沒法在請求數據之前通過Object.assign方式為替換初始變量，所以先這樣處理（笨方法，各位大佬有解決辦法麻煩指導下，謝謝）：
``
已解決，初始變量不需要動，可以通過以下方式實現：
`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；
可能存在瀏覽器兼容性問題，請從此處查閱：https://caniuse.com/#feat=his...。
Demo Or Source
因為是公司項目，所以目前沒有Demo或源碼
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/40198.html
摘要：使用開始支持，通過方式，將頁碼作為參數存儲在中，將選擇條件存儲在中尚不清楚數據具體是存儲在哪里通過方式獲取頁碼通過方式獲取存儲的選擇條件。具體實現技術選擇開關為分頁組件添加一個開關，因為需要灰度上線，萬一有問題，要調整的頁面也只有一個。 這篇文章主要給大家介紹了關于Vue利用History記錄上一頁面的數據的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學...
摘要：另外該事件只針對同一個文檔，如果瀏覽歷史的切換，導致加載不同的文檔，該事件不會被觸發使用的時候，可以為事件指定回調函數或者回調函數的參數是一個事件對象，它的屬性指向和方法為當前所提供的狀態對象即這兩個方法的第一個參數。 history window.history(可直接寫成history)指向History對象，它表示當前窗口的瀏覽歷史。History對象保存了當前窗口訪問過的所有頁...
摘要：方法與方法不同之處在于，它并不是將新路由添加到瀏覽器訪問歷史棧頂，而是替換掉當前的路由可以看出，它與的實現結構基本相似，不同點它不是直接對進行賦值，而是調用方法將路由進行替換。 隨著前端應用的業務功能起來越復雜，用戶對于使用體驗的要求越來越高，單面（SPA）成為前端應用的主流形式。大型單頁應用最顯著特點之一就是采用的前端路由系統，通過改變URL，在不重新請求頁面的情況下，更新頁面視圖。...
閱讀 2571·2021-11-24 09:38
閱讀 2601·2019-08-30 15:54
閱讀 915·2019-08-30 15:52
閱讀 1909·2019-08-30 15:44
閱讀 2713·2019-08-30 13:48
閱讀 768·2019-08-29 16:21
閱讀 996·2019-08-29 14:03
閱讀 2212·2019-08-28 18:15
