Vue 監聽手機返回鍵關閉彈窗
popstate 事件
a.當活動歷史記錄條目更改時，將觸發 popstate 事件。
b.如果被激活的歷史記錄條目是通過對 history.pushState() 的調用創建的，或者受到對 history.replaceState() 的調用的影響，
popstate 事件的 state 屬性包含歷史條目的狀態對象的副本。
c.需要注意的是調用 history.pushState() 或 history.replaceState() 不會觸發popstate事件。
d.只有在做出瀏覽器動作時，才會觸發該事件，如用戶點擊瀏覽器的回退按鈕（或者在Javascript代碼中調用history.back()）
實現代碼
1. 配置路由 meta 的 keepAlive 屬性，再 App.vue 中 使用 keep-alive 標簽 將當前頁面加入緩存中
<keep-alive>
<router-view v-wechat-title="$route.meta.title" v-if="$route.meta.keepAlive">
<!-- 這里是會被緩存的試圖組件 -->
</router-view>
</keep-alive>
<router-view v-wechat-title="$route.meta.title" v-if="!$route.meta.keepAlive">
<!-- 這里是不會被緩存的試圖組件 -->
</router-view>2. 打開彈窗調用 window.history.pushState() 函數（此處使用 watch 監聽 pop 彈窗是否打開）
watch: {
showSku(newVal) {
if (newVal) {
// 不刷新頁面，更改頁面的url
window.history.pushState(null, null, '#/shop/goodsdetail?id='+this.$route.query.id)
}
}
},3. activated 生命周期 監聽 popstate 事件 ，deactivated 生命周期 移除 popstate 事件
activated () {
window.addEventListener('popstate', this.popstate, false)
},
deactivated () {
window.removeEventListener('popstate', this.popstate, false)
},4. 事件監聽函數
popstate() {
if (this.showSku) {
this.showSku = !this.showSku
} else {
this.$router.go(-1)
}
},
拓展
一、歷史記錄前進與后退
1.后退：
window.history.back() -- 相當於用戶在瀏覽器的工具欄上點擊返回按鈕；
2.前進：
window.history.forward() -- 相當於用戶在瀏覽器的工具欄上點擊前進按鈕；
3.移動到指定歷史記錄點：
通過go()方法，指定一個相對於當前頁面位置的數值，從當前會話的歷史記錄中加載頁面（當前位置頁面索引：0，上一頁：-1，下一頁：1）；
window.history.go(-2)--后退2頁，相當於調用兩次back();
window.history.go(1)--前進1頁，相當於調用forward();
*可以通過window.history.length，得到歷史記錄棧中一共有多少頁。
二、添加/修改歷史記錄條目
1.pushState(stateObject,title,URL):
逐條添加歷史記錄條目，
a.狀態對象（stateObject）--一個JavaScript對象，與用pushState()方法創建的新歷史記錄條目關聯。無論何時用戶導航到新創建的狀態，popstate事件都會被觸發，並且事件對象的state屬性都包含歷史記錄條目的狀態對象的拷貝；（ps:FireFox瀏覽器強行限制狀態對象的大小為640k，超出則拋異常，可通過sessionStorage或localStorage存儲大的數據）
b.標題（title）--傳入一個簡短的標題，標明將要進入的狀態；（FireFox瀏覽器目前會忽略該參數，但是傳一個空字符串會比較安全）
c.地址（URL）--新的歷史記錄條目的地址（可選，不指定的話則為文檔當前URL）；瀏覽器不會在調用pushState()方法后加載該地址；傳入的URL與當前URL應該是同源的，否則，pushState()會拋出異常。
*某種意義上，調用pushState()有點類似於設置window.location='#foo'，它們都會在當前文檔內創建和激活新的歷史記錄條目。
2.replaceState():
history.replaceState()操作類似於history.pushState()，不同之處在於replaceState()方法會修改當前歷史記錄條目而並非創建新的條目。
3.popstate():
每當激活的歷史記錄發生變化時，都會觸發popstate事件。如果被激活的歷史記錄條目是由pushState所創建，或是被replaceState方法影響到的，popstate事件的狀態屬性將包含歷史記錄的狀態對象的一個拷貝。
讀取當前狀態：
如果頁面中使用pushState()或replaceState()方法設置了一個狀態對象，然后用戶重啟了瀏覽器。當頁面重新加載時，頁面會觸發onload事件，但不會觸發popstate事件。可以使用history.state直接讀取當前歷史記錄條目的狀態，而不需要等待popstate事件。
調用history.pushState()或者history.replaceState()不會觸發popstate事件.pushState事件只會在其他瀏覽器操作時觸發, 比如點擊后退按鈕(或者在JavaScript中調用history.back()方法)。
調用方法：
window.onpopstate = function(event) {
//做一些操作
event.state; // 當前歷史記錄條目的狀態
};或
window.addEventListener('popstate', (event) => {
//做一些操作
});--資料來源MDN
https://www.cnblogs.com/wyx-remove-love/p/wyx-20190510-1.html