feat(vue-app): trigger watchParam when param is changed in same route

[clarkdo]

Types of changes

• Bug fix (a non-breaking change which fixes an issue)
• New feature (a non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Description

Try to resolve #6235 , need more discussion.

Currently when dynamic path is changed (it means same route: like /test1 -> /test2 under /:test), we will always call asyncData instead of reusing, I'm not sure it this is in purpose @atinux @pi0 .

After the pr, asyncData will be called in client side when:

• route is changed (checking by from.name !=== to.name)
• route is not change, but param is changed and watchQuery is true
• route is not change, but query is changed and watchQuery is true

If current behaviour is correct and by design, how do you think adding a watchParam and make default value as true which means by default always calling asyncData when changing slug path.

I've changed this pr for adding watchParam

Behaviour after this pr:

• param is changed with same component, call asyncData
  • if only child param changed, call asyncData of child
  • if watchParam is false, not call asyncData of child
• query is changed with same component, not call asyncData
• both param and query are changed with same component, call asyncData

Checklist:

• My change requires a change to the documentation.
• I have updated the documentation accordingly. (PR: #)
• I have added tests to cover my changes (if not applicable, please state why)
• All new and existing tests are passing.

[atinux]

It was on purpose to call asyncData when the param changes but the same Component is used (actually it's a feature I missed in vue-router and did not want to people to use watch: $route).

I like the idea of introducing watchParam: false to disable it (even if I don't see a real use case)

[clarkdo]

@atinux Shared parent compoent may be a use case ? #6235

[clarkdo]

@atinux According to children.patch.browser.test, it seemed that asyncData is not called when param is changed.

Current behaviour is:

• param is changed with same component, not call asyncData
• query is changed with same component, not call asyncData
• both param and query are changed with same component, call asyncData

I don't think it's a correct behaviour, with the current pr, behaviour is:

• param is changed with same component, call asyncData
• query is changed with same component, not call asyncData
• both param and query are changed with same component, call asyncData

What do you think ?

[atinux]

I agree with the behaviour you describe, but we have to keep in mind about the Parent -> Child calls too,

• param is changed with same component, call asyncData
  • if only child param changed, call asyncData of child
• query is changed with same component, not call asyncData (expect if use watchQuery)
• both param and query are changed with same component, call asyncData

[galvez]

@atinux @clarkdo is there anything left to do here other than update tests?

[msonowal]

@atinux
Why this is not merged till now as its a must have like watchQuery

[atinux]

Approve but missing the docs PR :)