前言

創(chuàng)新互聯(lián)，為您提供網站建設公司、重慶網站制作、網站營銷推廣、網站開發(fā)設計，對服務成都水電改造等多個行業(yè)擁有豐富的網站建設及推廣經驗。創(chuàng)新互聯(lián)網站建設公司成立于2013年,提供專業(yè)網站制作報價服務,我們深知市場的競爭激烈，認真對待每位客戶，為客戶提供賞心悅目的作品。 與客戶共同發(fā)展進步，是我們永遠的責任！

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

UI

需求

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

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

技術選擇

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

具體實現(xiàn)--技術選擇2

開關

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

網站欄目：Vue利用History記錄上一頁面的數(shù)據(jù)方法實例-創(chuàng)新互聯(lián)
當前URL：http://weahome.cn/article/dgesss.html