Vue利用History記錄上一頁面的數(shù)據(jù)方法實例

Michael_Ding 發(fā)布于2019-08-26 13:23 / 420人閱讀

摘要：使用開始支持，通過方式，將頁碼作為參數(shù)存儲在中，將選擇條件存儲在中尚不清楚數(shù)據(jù)具體是存儲在哪里通過方式獲取頁碼通過方式獲取存儲的選擇條件。具體實現(xiàn)技術(shù)選擇開關為分頁組件添加一個開關，因為需要灰度上線，萬一有問題，要調(diào)整的頁面也只有一個。

這篇文章主要給大家介紹了關于Vue利用History記錄上一頁面的數(shù)據(jù)的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

前言

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

需求

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

從列表頁的第二頁進入詳情頁，返回時列表頁的篩選條件仍然存在。

技術(shù)選擇

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

開關

為分頁組件添加一個開關（openroute），因為需要灰度上線，萬一有問題，要調(diào)整的頁面也只有一個。代碼如下：

``

分頁組件中存儲頁碼和選擇條件&獲取頁碼

``

列表頁面獲取選擇條件

目前可能是因為框架設計的問題，沒法在請求數(shù)據(jù)之前通過Object.assign方式為替換初始變量，所以先這樣處理（笨方法，各位大佬有解決辦法麻煩指導下，謝謝）：

``

已解決，初始變量不需要動，可以通過以下方式實現(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)被誤導了（因為之前是通過Object.assign(true, this.form, history.state)方式實現(xiàn)數(shù)據(jù)賦值的，但是并沒有成功）。下面做個小總結(jié)：

Object.assign(true, a, b);”和“Object.assign(a, b);”有什么區(qū)別？

結(jié)論：前者：改a不影響b；后者：改a影響b

分析（這篇文章有源碼分析（求解答：WebStorm中如何關聯(lián)源碼？），很棒）：

FAQ

需要使用history.replaceState方式是因為：它不會將更改后的url壓到history棧中，所以不會增加回退和前進的操作步數(shù)；
使用history.replaceState方式，可存儲的state大小不能操作640k；
可能存在瀏覽器兼容性問題，請從此處查閱：https://caniuse.com/#feat=his...。
Demo Or Source

因為是公司項目，所以目前沒有Demo或源碼

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作具有一定的參考學習價值

云服務器 GPU云服務器 history歷史記錄上一頁面上一訪問頁面阿里云服務器上傳用vue做好的頁面

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/108725.html

Vue利用History記錄上一頁面的數(shù)據(jù)方法實例

摘要：使用開始支持，通過方式，將頁碼作為參數(shù)存儲在中，將選擇條件存儲在中尚不清楚數(shù)據(jù)具體是存儲在哪里通過方式獲取頁碼通過方式獲取存儲的選擇條件。具體實現(xiàn)技術(shù)選擇開關為分頁組件添加一個開關，因為需要灰度上線，萬一有問題，要調(diào)整的頁面也只有一個。這篇文章主要給大家介紹了關于Vue利用History記錄上一頁面的數(shù)據(jù)的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學...

Magicer 2019-07-25 14:31 評論0 收藏0
history和hash，vue-router

摘要：另外該事件只針對同一個文檔，如果瀏覽歷史的切換，導致加載不同的文檔，該事件不會被觸發(fā)使用的時候，可以為事件指定回調(diào)函數(shù)或者回調(diào)函數(shù)的參數(shù)是一個事件對象，它的屬性指向和方法為當前所提供的狀態(tài)對象即這兩個方法的第一個參數(shù)。 history window.history(可直接寫成history)指向History對象，它表示當前窗口的瀏覽歷史。History對象保存了當前窗口訪問過的所有頁...

godiscoder 2019-08-23 18:07 評論0 收藏0
vue：路由實現(xiàn)原理

摘要：方法與方法不同之處在于，它并不是將新路由添加到瀏覽器訪問歷史棧頂，而是替換掉當前的路由可以看出，它與的實現(xiàn)結(jié)構(gòu)基本相似，不同點它不是直接對進行賦值，而是調(diào)用方法將路由進行替換。隨著前端應用的業(yè)務功能起來越復雜，用戶對于使用體驗的要求越來越高，單面（SPA）成為前端應用的主流形式。大型單頁應用最顯著特點之一就是采用的前端路由系統(tǒng)，通過改變URL，在不重新請求頁面的情況下，更新頁面視圖。...

mikasa 2019-08-22 17:08 評論0 收藏0