I front-end rookie, has been committed to uninterrupted production management background bug, and to encourage themselves. In recent days, I received a demand and searched many examples on the Internet, but there was no fundamental solution. Here is a record of my own settlement process, this is also the first time in the Nuggets to speak, begging for leniency.

🐛 Requirement Description:

There are two pages A and B, and the orderId of page A needs to be passed to page B in the way of routing parameter to perform data association query, and then displayed on page B

Requirements analysis:

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

Solve the demand

Page A:

const route = {
        name: 'BpageName'.params: { orderId: this.tableData[index].id },
        meta: {
          title: 'B page'}}this.$router.push(route)
Copy the code

Push a route to reopen page B

Then page B accepts route parameters:

@Watch('$route.params.packageId')
routeParamsChanged(newParams: any, oldParams: any) :void { // Re-copy arguments by listening for changes in the passed arguments
    if (newParams) {
      this.getList(newParams)
    }
}
Copy the code

Doesn’t it look easy?

Check a lot of information, vUE project watch functions trigger the problem repeatedly and here is an explanation of the cause of this situation. Solution 1: Check whether fullPath is A page

if (this.$route.fullPath === 'A page routing path ') {
    // do something
}
Copy the code

I tried it with great excitement

@Watch('$route')
routeParamsChanged(newParams: any, oldParams: any) :void { // Re-copy arguments by listening for changes in the passed arguments
    if (newParams === '/Apage') {
      this.getList(newParams)
    }
}
Copy the code

The routeParamsChanged method is executed twice or more. Solution 2 Add a flag parameter to check whether the page is in the active state. Components that use the keep-alive cache trigger only the activated and deactivated events. Therefore, set the flag to true and false when the two events are triggered. GetList () is executed only if flag is true.


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

deactivated () {
    this.activatedFlag = false;
}
@Watch('$route')
routeParamsChanged(newParams: any, oldParams: any) :void { // Re-copy arguments by listening for changes in the passed arguments
    if (newParams && this.activatedFlag) {
      this.getList(newParams)
    }
}
Copy the code

Did you fix it this time? The routeParamsChanged method is executed twice or more. Crash ing…

Problem solving

Check that the value of Activated () lifecycle hook function is activated () and that the value of this.$route.params.orderId is used to fetch data.

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

deactivated () {
    this.activatedFlag = false;
}
Copy the code

We’re done. We’re done. Big guys for light ridicule code, have better comments or suggestions, welcome to comment message guidance.