Vue monitors the back and forward buttons under Wechat's browser

  1. only operates in Wechat"s browser. By default, you don"t need to display the return and forward button at the bottom of the menu page, but you can"t prohibit it, so it doesn"t matter if you go back. It"s mainly designed for menu shopping cart and settlement page, and the design is all pop-up windows. This causes you to click the back button of the pop-up window to return directly to the previous page, instead of staying on the menu page and just closing the pop-up window
  2. .
  3. Legend

clipboard.png

clipboard.png

  1. tried method:
    method found on the Internet:
    (1) directly disabled:

window.addEventListener ("WeixinJSBridgeReady", function onBridgeReady (e) {

)
    window.WeixinJSBridge.call("hideToolbar")
    window.WeixinJSBridge.call("hideOptionMenu")
  })
  

2:

pushHistory () {

  // 
  let state = {
    title: "title",
    url: "-sharp"
  }
  window.history.pushState(state, state.title, state.url)
},
back () {
  this.pushHistory()
  var _self = this
  window.addEventListener("popstate", function (e) {  // popstate
    if (_self.isShowDialog) {
      _self.hideDialog()
    } else {
      alert(_self.isShowDialog)
    }
  }, false)
},


Jan.03,2022

the forward and back buttons below Wechat are based on your webview browsing history. If you don't have browsing history, this thing won't show up.

so if you want to block the forward and back buttons, when the route jumps, don't use push, and replace. Most of the subjects use pop-up windows, and [no browsing history] should not have too much interactive problems.


vue-router routing hook listening is used.

Menu