vue-router next(false) Issue not retaining historical access records when accessing a certain page is prohibited

The normal access process for users is Product List Page [Page a]->Product Details Page (Select different planned price factors and click to buy) [Page b]->Product Purchase Page [Page c]

Do the following operations

Page c Press <- Return key to return to page b,

And page B wants to go back to page c through the -> forward key.

Such operations are not allowed.

then

I wrote the following code

  /** Prevents the plan price and price factors you selected before backing from the form page */
  beforeRouteEnter (to, from, next) {
    if ( === 'orderInput') {
      ('preventForward', true)
    }
    next()
  },
  beforeRouteLeave (to, from, next) {
    // If it is returned from the form filling page and is not going to the form filling page through the purchase button    if ( === 'orderInput' &amp;&amp; ('preventForward') === 'true') {
      ('Please click the purchase button to purchase')
      next(false)
    } else {
      next()
    }
  },
  method:{
	  buy(){
	   ('preventForward', false)
	  }
  }

But this operation has a problem. After I blocked the operation to page c next(false), if I press the return key on page b, and as we expected, I should return to page a.

But at this time, it will actually return to page c.

The reason is that although we blocked the c page, it entered the historical stack. I thought of a way to prevent this forbidden request from being added to the stack.

That is,next(false)Joined earlier

this.$(-1)

Overall code

as follows:

beforeRouteEnter (to, from, next) {
  if ( === 'orderInput') {
    ('preventForward', true)
  }
   next()
},
beforeRouteLeave (to, from, next) {
  // If it is returned from the form filling page and is not going to the form filling page through the purchase button  if ( === 'orderInput' &amp;&amp; ('preventForward') === 'true') {
    this.$(-1)
    ('Please click the purchase button to purchase')
    // Remove next (false) here.  Compatible with mobile terminal.  Otherwise, the above sentence will be repeatedly reminded when operating on WeChat.  //  next(false)
  } else {
    next()
  }
},
method:{
    buy(){
     ('preventForward', false)
    }
}

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.