Vue 弹窗时 监听手机返回键关闭弹窗（页面不跳转）

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