Vue開發中子頁面跳轉回主頁時保存主頁查詢條件的處理方法

在Vue的實際開發過程中，出現了這種需求:

主頁form查找數據，查找完成用戶跳轉到詳情頁，之后返回主頁后保存查詢條件

對於不同的情況，可以采用不同的方法。

寫在同一個文件，通過v-if, v-show控制顯隱

將主頁面和詳情頁寫在同一個文件里其實相當於一個主頁數據和詳情頁數據在一個頁面上，只是顯示和隱藏的區別，屬於同一個DOM樹。注意點在於數據和函數命名在同一文件內不能重名。

通過本地存儲來儲存主頁查詢條件

正常進行路由跳轉，查詢條件由本地儲存來保存。

window.localStorage - 存儲沒有截止日期的數據
// 存儲
localStorage.setItem("lastname", "Gates");
// 取回
document.getElementById("result").innerHTML = localStorage.lastname;
//刪除
localStorage.removeItem("lastname");
window.sessionStorage - 針對一個 session 來存儲數據（當關閉瀏覽器標簽頁時數據會丟失）

本地儲存的局限性

• localStorage 會可以將第一次請求的數據直接存儲到本地，這個相當於一個 5M 大小的針對於前端頁面的數據庫，相比於 cookie 可以節約帶寬，但是這個卻是只有在高版本的瀏覽器中才支持的
• 目前所有的瀏覽器中都會把localStorage的值類型限定為string類型，這個在對我們日常比較常見的JSON對象類型需要一些轉換
• localStorage在瀏覽器的隱私模式下面是不可讀取的
• localStorage本質上是對字符串的讀取，如果存儲內容多的話會消耗內存空間，會導致頁面變卡

將子頁面作為組件引用的主頁面

頁面已開發完，父子頁面文件如果要合並不僅要浪費大量的開發成本，而且還會有很大的風險，這種情況下，將子頁面作為父頁面的組件引用是很合適的方法。
1.將整個子頁面作為組件注冊聲明在主頁面。

import sonPage from '...'

export default{
  components: { sonPage } 
}

2.在頁面中引入組件實例，設置屬性

<section v-if="checkDetailPage">
    <checkDetailPage
            :id="qualityId"
            :qualityType="'10'"
            :recheckId="recheckId"
            :checkStatus="tabName"
            @backSearchPage="backSearchPage($event)"
    >
    </checkDetailPage>
</section>

3.子頁面（組件）prop並使用父子組件通信傳值