fix(vue-app): reuse page component on watchQuery

[hatashiro]

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

Related issue and pull request:

• Resolves: watchQuery on page re-creates page component #5738 Cannot access "this" in key() after #5516 #5759
• Related: fix(vue-app): consider watchQuery option in routerViewKey #5516

I've submitted the pull request #5516 and it's about making watchQuery considered on creating a route key. However, by the change, page components are no more reused but recreated for every query route specified in watchQuery (#5738). The pull request was actually a breaking change.

The main goal of the original pull request was to make scroll restoration work with query route. Disabling component reuse is unexpected side-effect. Thus I'd like to revert the original change, with still enabling scroll restoration in a different way. So, here is this pull request.

This pull request restores the original routerViewKey behaviour ($route.path) so that page components are reused. Instead, I added $emit('triggerScroll') in fixPrepatch, which is called only when navigating on a different route but the same component is used according to the function's comment. I tested the change out on example pages and it worked well. The original test cases on scroll behaviour pass too.

Because of this change the documentation about routerViewKey should be updated (watchQuery no more affects the key). I'll update it and upload a pull request on docs after this pull request is reviewed.

Thanks in advance!

Checklist:

• My change requires a change to the documentation.
• I have updated the documentation accordingly. (PR: doc: remove 'watchQuery' section from 'nuxtChildKey' doc docs#1395)
• I have added tests to cover my changes (if not applicable, please state why)
  • There is already tests for the behaviour: https://github.com/nuxt/nuxt.js/blob/dev/test/e2e/basic.browser.test.js#L144-L181
• All new and existing tests are passing.

[codecov-io]

Codecov Report

Merging #5757 into dev will decrease coverage by 0.03%.
The diff coverage is n/a.

@@            Coverage Diff            @@
##              dev   #5757      +/-   ##
=========================================
- Coverage   95.64%   95.6%   -0.04%     
=========================================
  Files          82      82              
  Lines        2662    2662              
  Branches      683     683              
=========================================
- Hits         2546    2545       -1     
- Misses         97      98       +1     
  Partials       19      19

Impacted Files	Coverage Δ
packages/vue-renderer/src/renderer.js	93.49% <0%> (-0.82%)	⬇️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 5d5a32b...2bb5ce1. Read the comment docs.

[codecov-io]

Codecov Report

Merging #5757 into dev will not change coverage.
The diff coverage is n/a.

@@          Coverage Diff          @@
##             dev   #5757   +/-   ##
=====================================
  Coverage   95.6%   95.6%           
=====================================
  Files         82      82           
  Lines       2662    2662           
  Branches     683     683           
=====================================
  Hits        2545    2545           
  Misses        98      98           
  Partials      19      19

Flag	Coverage Δ
#e2e	100% <ø> (ø)	⬆️
#fixtures	50.67% <ø> (ø)	⬆️
#unit	92.56% <ø> (ø)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update dbb9f03...1b45a95. Read the comment docs.

[clarkdo]

Documentation also needs to be reverted 😄

[hatashiro]

I've submitted a pull request on docs too.