微信iOS虚拟键返回不刷新，Vue如何巧妙解决？

本文共计797个文字，预计阅读时间需要4分钟。

问题描述：制作微信H5页面时，经过微信授权后跳转到一级默认路由home.vue中，由于在home页面时在iOS中底部会出现虚拟的返回键，而安卓上不会出现。且在iOS点击返回键时，会跳转回home空白页。

问题描述：

做微信h5页面时，经过了微信授权才跳转到一级默认路由home.vue中，因此在home页面时在IOS中底部会出现虚拟的返回键，安卓上不会出现。且在IOS点击返回时会跳转到home空白页面不重新加载，但是在安卓机上点击返回键会重新加载。

实现功能：

解决IOS问题(在home页面点返回时路由还是在home页面，并完成重新加载)

分析：

需要在进入页面时加入监听，并在页面离开时移除监听。因为home页面是个滚动列表，所以我采用了keep-alive路由缓存，所以不能在created()和beforeDestroy()生命周期中写，因此我在home.vue中加了组件内的守卫beforeRouteLeave ()在里面移除监听，在activated()中添加监听。
如果页面没有采用路由缓存，则监听事件和移除事件可以在created()和beforeDestroy()这两个生命周期函数中写。

注意：

addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作。
它们都接受3个参数：事件名、事件处理的函数和布尔值。
布尔值参数是true，表示在捕获阶段调用事件处理程序；
如果是false，表示在冒泡阶段调用事件处理程序。