頁面?zhèn)髦?/h2>
1 最常用的莫過于參數(shù)傳值
傳值是最好將字典，數(shù)組類型的 轉(zhuǎn)成json字符串比較好
JSON.stringify(item)
1 this.$router.push({
name: 'TripFlightDetail',//頁面名字
path:'/TripFlightDetail',//頁面路勁 和上面名字任意一個都可以
query: {flight: JSON.stringify(item)} // 參數(shù)傳值
})
2 這種也可以
this.$router.push({
name: 'TripFlightDetail’,
params: {flight: this.currentRecomd}
// })
然后到下一個頁面 的mounted()函數(shù)中取值
let flight = JSON.parse(this.$route.query.flight) // 取
有個問題需要注意：
如果在微信中 下面有 <- -> 前進返回 箭頭 就要用 name 這種方式push 下一個頁面是可以到下一個頁面，但是單按右箭頭返回時是返回不到先前界面的
因為它記錄的是頁面路勁，所以如果想要實現(xiàn)可以返回的界面切換最好要用 path 路徑來push
但是 query 傳值不能太多，太多的話在微信中會閃一下 消失掉 這時候就要用另一種方式了
緩存?zhèn)髦?/h3>
像全局變量： 只要存下，什么地方用什么地方取
//本地存
localStorage.setItem('trip',JSON.stringify(_this.currentRecomd))
this.$router.push({
name: 'HotelPage',
//推頁面是這里就不需要傳值了
})
//用的時候取
let trip = JSON.parse(localStorage.getItem('trip')); //取
還有一個 sessionStorage 緩存?zhèn)髦?和 localStorage的操作類似
但是兩者是有區(qū)別的：
WebStorage的目的是克服由cookie所帶來的一些限制，當(dāng)數(shù)據(jù)需要被嚴(yán)格控制在客戶端時，不需要持續(xù)的將數(shù)據(jù)發(fā)回服務(wù)器。
WebStorage兩個主要目標(biāo)：（1）提供一種在cookie之外存儲會話數(shù)據(jù)的路徑。（2）提供一種存儲大量可以跨會話存在的數(shù)據(jù)的機制。
HTML5的WebStorage提供了兩種API：localStorage（本地存儲）和sessionStorage（會話存儲）。
1、生命周期：localStorage:localStorage的生命周期是永久的，關(guān)閉頁面或瀏覽器之后localStorage中的數(shù)據(jù)也不會消失。localStorage除非主動刪除數(shù)據(jù)，否則數(shù)據(jù)永遠不會消失。
sessionStorage的生命周期是在僅在當(dāng)前會話下有效。sessionStorage引入了一個“瀏覽器窗口”的概念，sessionStorage是在同源的窗口中始終存在的數(shù)據(jù)。只要這個瀏覽器窗口沒有關(guān)閉，即使刷新頁面或者進入同源另一個頁面，數(shù)據(jù)依然存在。但是sessionStorage在關(guān)閉了瀏覽器窗口后就會被銷毀。同時獨立的打開同一個窗口同一個頁面，sessionStorage也是不一樣的。
2、存儲大?。簂ocalStorage和sessionStorage的存儲數(shù)據(jù)大小一般都是：5MB
3、存儲位置：localStorage和sessionStorage都保存在客戶端，不與服務(wù)器進行交互通信。
4、存儲內(nèi)容類型：localStorage和sessionStorage只能存儲字符串類型，對于復(fù)雜的對象可以使用ECMAScript提供的JSON對象的stringify和parse來處理
5、獲取方式：localStorage：window.localStorage;；sessionStorage：window.sessionStorage;。
6、應(yīng)用場景：localStoragese：常用于長期登錄（+判斷用戶是否已登錄），適合長期保存在本地的數(shù)據(jù)。sessionStorage：敏感賬號一次性登錄；
WebStorage的優(yōu)點：
（1）存儲空間更大：cookie為4KB，而WebStorage是5MB；
（2）節(jié)省網(wǎng)絡(luò)流量：WebStorage不會傳送到服務(wù)器，存儲在本地的數(shù)據(jù)可以直接獲取，也不會像cookie一樣美詞請求都會傳送到服務(wù)器，所以減少了客戶端和服務(wù)器端的交互，節(jié)省了網(wǎng)絡(luò)流量；
（3）對于那種只需要在用戶瀏覽一組頁面期間保存而關(guān)閉瀏覽器后就可以丟棄的數(shù)據(jù)，sessionStorage會非常方便；
（4）快速顯示：有的數(shù)據(jù)存儲在WebStorage上，再加上瀏覽器本身的緩存。獲取數(shù)據(jù)時可以從本地獲取會比從服務(wù)器端獲取快得多，所以速度更快；
（5）安全性：WebStorage不會隨著HTTP header發(fā)送到服務(wù)器端，所以安全性相對于cookie來說比較高一些，不會擔(dān)心截獲，但是仍然存在偽造問題；
（6）WebStorage提供了一些方法，數(shù)據(jù)操作比cookie方便；
setItem (key, value) —— 保存數(shù)據(jù)，以鍵值對的方式儲存信息。
getItem (key) —— 獲取數(shù)據(jù)，將鍵值傳入，即可獲取到對應(yīng)的value值。
removeItem (key) —— 刪除單個數(shù)據(jù)，根據(jù)鍵值移除對應(yīng)的信息。
clear () —— 刪除所有的數(shù)據(jù)
key (index) —— 獲取某個索引的key
