The reason and solution for the watch method to be executed multiple times when vue listens for routing changes.

I am a front-end rookie and have always been committed to uninterrupted production management bugs in the backend, and I encourage myself. I have received a request in recent days and have searched for many examples online, but it has not been fundamentally solved. Here I will record my own solution process. This is also the first time I have spoken in the Nuggets, asking for slight abuse.

Requirement description:

There are two pages A and B. You need to pass the orderId of page A into page B by routing parameters to perform data association query, and then display it on page B.

Requirement analysis:

If it is you, if you get this requirement, it should be easy to think of a way to watch the routing changes on page B and then obtain parameters and execute query data.

Solve the needs

In page A:

const route = {
        name: 'BpageName',
        params: { orderId: [index].id },
        meta: {
          title: 'Page B'
        }
      }
this.$(route)

push a route to reopen page B

Then accept the routing parameters in page B:

@Watch('$')
routeParamsChanged(newParams: any, oldParams: any) :void { //Re-copy parameters by listening for changes in parameters    if (newParams) {
      (newParams)
    }
}

Doesn't it seem very simple?

But the problem is that because the B page is kept-alive page cache, the routeParamsChanged method is only executed once during the first route switching, achieving the expected effect. However, if you close page B or jump from page A to page B without closing page B, the routeParamsChanged method will be triggered twice or more times.
I've looked up a lot of information,Repeated functions in vue project watch trigger problemHere is an explanation of the reasons for this.

Solution 1: Determine whether fullPath is page A

if (this.$ === 'A page routing path') {
    // do something
}

Try it with excitement

@Watch('$route')
routeParamsChanged(newParams: any, oldParams: any) :void { //Re-copy parameters by listening for changes in parameters    if (newParams === '/Apage') {
      (newParams)
    }
}

The result is still not possible, the routeParamsChanged method will still be executed twice or more times. Solution 2 Add a flag parameter to determine whether the page is active. Components using keep-alive cache will only trigger activated and deactivated events, so when these two events are triggered, the flag is set to true and false, and only when the flag is true will the getList() be executed.

private activatedFlag: boolean = false
activated () {
     = true;
}

deactivated () {
     = false;
}
@Watch('$route')
routeParamsChanged(newParams: any, oldParams: any) :void { //Re-copy parameters by listening for changes in parameters    if (newParams && ) {
      (newParams)
    }
}

Is this time a change solved? The result is still not possible, the routeParamsChanged method will still be executed twice or more times. Crashing......

Problem solving

Drawing on solution 2 above, we finally get the implementation to obtain parameters and call the method of obtaining data in the activated () life cycle hook function. There is no need to listen to the changes in the route, and as long as this.$ is obtained, we get the data.

private activatedFlag: boolean = false
activated () {
     = true
    if (this.$ && ) {
      (this.$)
    }
}

deactivated () {
     = false;
}

The task was done and finally solved. Big guys are asking for a light complaint on the code and have better opinions or suggestions. Please leave comments and messages to guide you.

The above is the detailed content of the reason and solution of the watch method that will be executed multiple times when vue listens for routing changes. For more information about the reasons and solution of the vue watch method that will be executed multiple times, please pay attention to my other related articles!