fix(vue-app): consider watchQuery option in routerViewKey (#5516)

packages/vue-app/template/components/nuxt.js

@@ -40,10 +40,30 @@ export default {
       if (typeof this.nuxtChildKey !== 'undefined' || this.$route.matched.length > 1) {
         return this.nuxtChildKey || compile(this.$route.matched[0].path)(this.$route.params)
       }
+
       const Component = this.$route.matched[0] && this.$route.matched[0].components.default
-      if (Component && Component.options && Component.options.key) {
+      if (Component && Component.options) {
-        return (typeof Component.options.key === 'function' ? Component.options.key(this.$route) : Component.options.key)
+        const { key, watchQuery } = Component.options
+
+        if (key) {
+          return (typeof key === 'function' ? key(this.$route) : key)
+        }
+
+        if (watchQuery) {
+          if (watchQuery.length) {
+            const pickedQuery = {}
+            for (const queryKey of watchQuery) {
+              pickedQuery[queryKey] = this.$route.query[queryKey]
+            }
+            return this.$router.resolve({
+              path: this.$route.path,
+              query: pickedQuery
+            }).href
+          }
+          return this.$route.fullPath
+        }
       }
+
       return this.$route.path
     }
   },

test/e2e/basic.browser.test.js

@@ -123,11 +123,59 @@ describe('basic browser', () => {
     expect(await page.$text('h1')).toBe('User: 1')
   })
 
-  test('/scroll-to-top', async () => {
+  test('/scroll-to-top with scrollToTop set to true', async () => {
     const page = await browser.page(url('/scroll-to-top'))
     await page.evaluate(() => window.scrollBy(0, window.innerHeight))
-    await page.nuxt.navigate('/scroll-to-top/other')
+    await page.nuxt.navigate('/scroll-to-top/scroll-to-top-true')
     const pageYOffset = await page.evaluate(() => window.pageYOffset)
+    expect(pageYOffset).toBe(0)
+    page.close()
+  })
+
+  test('/scroll-to-top with scrollToTop set to false', async () => {
+    const page = await browser.page(url('/scroll-to-top'))
+    await page.evaluate(() => window.scrollBy(0, window.innerHeight))
+    await page.nuxt.navigate('/scroll-to-top/scroll-to-top-false')
+    const pageYOffset = await page.evaluate(() => window.pageYOffset)
+    expect(pageYOffset).toBeGreaterThan(0)
+    page.close()
+  })
+
+  test('/scroll-to-top in the same page', async () => {
+    const page = await browser.page(url('/scroll-to-top'))
+    await page.evaluate(() => window.scrollBy(0, window.innerHeight))
+    await page.nuxt.navigate('/scroll-to-top?test=1')
+    const pageYOffset = await page.evaluate(() => window.pageYOffset)
+    expect(pageYOffset).toBeGreaterThan(0)
+    page.close()
+  })
+
+  test('/scroll-to-top in the same page with watchQuery: true', async () => {
+    const page = await browser.page(url('/scroll-to-top/watch-query-true'))
+    await page.evaluate(() => window.scrollBy(0, window.innerHeight))
+    await page.nuxt.navigate('/scroll-to-top/watch-query-true?test=1')
+    let pageYOffset = await page.evaluate(() => window.pageYOffset)
+    expect(pageYOffset).toBe(0)
+    await page.nuxt.go(-1)
+    pageYOffset = await page.evaluate(() => window.pageYOffset)
+    expect(pageYOffset).toBeGreaterThan(0)
+    page.close()
+  })
+
+  test('/scroll-to-top in the same page with watchQuery array', async () => {
+    const page = await browser.page(url('/scroll-to-top/watch-query-array'))
+    await page.evaluate(() => window.scrollBy(0, window.innerHeight))
+    await page.nuxt.navigate('/scroll-to-top/watch-query-array?other=1')
+    let pageYOffset = await page.evaluate(() => window.pageYOffset)
+    expect(pageYOffset).toBeGreaterThan(0)
+    await page.nuxt.go(-1)
+    pageYOffset = await page.evaluate(() => window.pageYOffset)
+    expect(pageYOffset).toBeGreaterThan(0)
+    await page.nuxt.navigate('/scroll-to-top/watch-query-array?test=1')
+    pageYOffset = await page.evaluate(() => window.pageYOffset)
+    expect(pageYOffset).toBe(0)
+    await page.nuxt.go(-1)
+    pageYOffset = await page.evaluate(() => window.pageYOffset)
     expect(pageYOffset).toBeGreaterThan(0)
     page.close()
   })

test/fixtures/basic/pages/scroll-to-top/index.vue

@@ -1,7 +1,13 @@
 <template>
   <div>
-    <NuxtLink to="/scroll-to-top/other">
+    <NuxtLink to="/scroll-to-top/scroll-to-top-true">
-      go to other
+      go to scroll-to-top-true
+    </NuxtLink>
+    <NuxtLink to="/scroll-to-top/scroll-to-top-false">
+      go to scroll-to-top-false
+    </NuxtLink>
+    <NuxtLink to="/scroll-to-top?test=1">
+      go to the same page
     </NuxtLink>
   </div>
 </template>

test/fixtures/basic/pages/scroll-to-top/scroll-to-top-true.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <NuxtLink to="/scroll-to-top">
+      go to index
+    </NuxtLink>
+  </div>
+</template>
+
+<script>
+export default {
+  scrollToTop: true
+}
+</script>

test/fixtures/basic/pages/scroll-to-top/watch-query-array.vue

@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <NuxtLink to="/scroll-to-top/watch-query-true?test=1">
+      go to the same page
+    </NuxtLink>
+  </div>
+</template>
+
+<script>
+export default {
+  watchQuery: ['test']
+}
+</script>
+
+<style>
+div {
+  margin-top: 1500px;
+}
+</style>

test/fixtures/basic/pages/scroll-to-top/watch-query-true.vue

@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <NuxtLink to="/scroll-to-top/watch-query-true?test=1">
+      go to the same page
+    </NuxtLink>
+  </div>
+</template>
+
+<script>
+export default {
+  watchQuery: true
+}
+</script>
+
+<style>
+div {
+  margin-top: 1500px;
+}
+</style>

test/utils/browser.js

@@ -73,6 +73,22 @@ export default class Browser {
         }
         return { hook }
       },
+      async go(n, waitEnd = true) {
+        const hook = page.evaluate(`
+          new Promise(resolve =>
+            ${page.$nuxtGlobalHandle}.$once('routeChanged', resolve)
+          ).then(() => new Promise(resolve => setTimeout(resolve, 50)))
+        `)
+        await page.evaluate(
+          ($nuxt, n) => $nuxt.$router.go(n),
+          page.$nuxt,
+          n
+        )
+        if (waitEnd) {
+          await hook
+        }
+        return { hook }
+      },
       routeData() {
         return page.evaluate(($nuxt) => {
           return {