A small method, I don’t know if it makes sense, but at least it can…

preface

First there are three pages: the first page – page A – page B.

Page B will jump to page A when two events are triggered: return and commit.

  • The return uses the native listener return event, and there is A requirement to pass in the parameters and render page A based on the parameters.
  • To submit, click the button to jump to the new A page.

Here is the listener return event:

mounted(){
    if (window.history && window.history.pushState) {
      history.pushState(null.null.document.URL)
	// Listen back
      window.addEventListener('popstate'.this.goBack, false); }},destroyed(){
	// Remove the listener
      window.removeEventListener('popstate'.this.goBack, false); }},methods: {goBack(){
      this.$router.replace({
        name: "A".params: {
          type:"a"}}); }}Copy the code

But there’s a problem:

  • When you return, jump to page A; Click on page A to return to the home page. (And then click back on the home page to redirect to page B, should be like this, forget)
  • When submitting, jump to page A; At page A, the exception returns to page B.

In short, use history.pushState whenever you want to listen for native return events, and once you use it, that record will always be there. After searching for a solution for most of the day, I finally chose to replace the whole way roughly.

The solution

Add an attribute isSubmit to page B:

data{
	isSubmit:false
}
Copy the code

If submit is clicked, change isSubmit to True before submitting:

this.isSubmit=true
Copy the code

Then use lifecycle destroyed. Since only submission and return now change the route and destroy the page. So when isSubmit is false, the return event is triggered:

destroyed(){
  if(!this.isSumbit){
    this.$router.replace({
      name: "A".params: {
          type:"a"}}); }},Copy the code

Similarly, since page A jumps to either the home page or page B, add an attribute isSubmit to page A as well. If the event is triggered to jump to page B, change isSubmit to False before the event.

beforeDestroy(){
  if(!this.isSubmit){
    this.$router.replace({name:'index'})}},Copy the code