fix(nuxt): scroll to top by default on dynamic routes (#22403)

packages/nuxt/src/pages/runtime/router.options.ts

@@ -63,13 +63,5 @@ function _getHashElementScrollMarginTop (selector: string): number {
 }
 
 function _isDifferentRoute (from: RouteLocationNormalized, to: RouteLocationNormalized): boolean {
-  const samePageComponent = to.matched.every((comp, index) => comp.components?.default === from.matched[index]?.components?.default)
+  return to.path !== from.path || JSON.stringify(from.params) !== JSON.stringify(to.params)
-
-  if (!samePageComponent) {
-    return true
-  }
-  if (samePageComponent && JSON.stringify(from.params) !== JSON.stringify(to.params)) {
-    return true
-  }
-  return false
 }

test/basic.test.ts

@@ -533,6 +533,56 @@ describe('nuxt links', () => {
 
     await page.close()
   })
+
+  it('expect scroll to top on routes with same component', async () => {
+    // #22402
+    const page = await createPage('/big-page-1')
+    await page.setViewportSize({
+      width: 1000,
+      height: 1000
+    })
+    await page.waitForLoadState('networkidle')
+
+    await page.locator('#big-page-2').scrollIntoViewIfNeeded()
+    expect(await page.evaluate(() => window.scrollY)).toBeGreaterThan(0)
+    await page.locator('#big-page-2').click()
+    await page.waitForURL(url => url.href.includes('/big-page-2'))
+    await page.waitForTimeout(25)
+    expect(await page.evaluate(() => window.scrollY)).toBe(0)
+
+    await page.locator('#big-page-1').scrollIntoViewIfNeeded()
+    expect(await page.evaluate(() => window.scrollY)).toBeGreaterThan(0)
+    await page.locator('#big-page-1').click()
+    await page.waitForURL(url => url.href.includes('/big-page-1'))
+    await page.waitForTimeout(25)
+    expect(await page.evaluate(() => window.scrollY)).toBe(0)
+    await page.close()
+  })
+
+  it('expect scroll to top on nested pages', async () => {
+    // #20523
+    const page = await createPage('/nested/foo/test')
+    await page.setViewportSize({
+      width: 1000,
+      height: 1000
+    })
+    await page.waitForLoadState('networkidle')
+
+    await page.locator('#user-test').scrollIntoViewIfNeeded()
+    expect(await page.evaluate(() => window.scrollY)).toBeGreaterThan(0)
+    await page.locator('#user-test').click()
+    await page.waitForURL(url => url.href.includes('/nested/foo/user-test'))
+    await page.waitForTimeout(25)
+    expect(await page.evaluate(() => window.scrollY)).toBe(0)
+
+    await page.locator('#test').scrollIntoViewIfNeeded()
+    expect(await page.evaluate(() => window.scrollY)).toBeGreaterThan(0)
+    await page.locator('#test').click()
+    await page.waitForURL(url => url.href.includes('/nested/foo/test'))
+    await page.waitForTimeout(25)
+    expect(await page.evaluate(() => window.scrollY)).toBe(0)
+    await page.close()
+  })
 })
 
 describe('head tags', () => {

test/fixtures/basic/modules/page-extend/index.ts

@@ -12,7 +12,13 @@ export default defineNuxtModule({
       pages.push({
         name: 'page-extend',
         path: '/page-extend',
-        file: resolver.resolve('./runtime/page.vue')
+        file: resolver.resolve('../runtime/page.vue')
+      }, {
+        path: '/big-page-1',
+        file: resolver.resolve('./pages/big-page.vue')
+      }, {
+        path: '/big-page-2',
+        file: resolver.resolve('./pages/big-page.vue')
       })
     })
   }

test/fixtures/basic/modules/page-extend/pages/big-page.vue

@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <div class="big-block">
+      big
+    </div>
+    <div class="big-block">
+      page
+    </div>
+    <NuxtLink id="big-page-1" to="/big-page-1">
+      to big page 1
+    </NuxtLink>
+    <NuxtLink id="big-page-2" to="/big-page-2">
+      to big page 2
+    </NuxtLink>
+    <NuxtLink id="big-page-2-test-test" to="/big-page-2?test=test">
+      to big page 2 with ?test=test
+    </NuxtLink>
+    <NuxtLink id="big-page-2-test-super-test" to="/big-page-2?test=super-test">
+      to big page 2 with ?test=super-test
+    </NuxtLink>
+  </div>
+</template>
+
+<script setup>
+definePageMeta({
+  layout: false
+})
+</script>
+
+<style scoped>
+.big-block {
+    height: 90vh;
+    width: 100vw;
+    background-color: brown;
+}
+</style>

test/fixtures/basic/pages/index.vue

@@ -53,6 +53,9 @@
     <component :is="`with${'-'.toString()}suffix`" />
     <ClientWrapped ref="clientRef" style="color: red;" class="client-only" />
     <ServerOnlyComponent class="server-only" style="background-color: gray;" />
+    <NuxtLink to="/big-page-1">
+      to big 1
+    </NuxtLink>
   </div>
 </template>
 

test/fixtures/basic/pages/nested/[foo].vue

@@ -6,5 +6,16 @@ const route = useRoute('nested-foo')
   <div>
     <div>nested/[foo]/index.vue</div>
     <div>foo: {{ route.params.foo }}</div>
+
+    <div class="big-block" />
+    <div class="big-block" />
+    <NuxtPage />
   </div>
 </template>
+
+<style scoped>
+.big-block {
+  height: 90vh;
+  width: 100vw;
+}
+</style>

test/fixtures/basic/pages/nested/[foo]/[bar].vue

@@ -7,5 +7,11 @@ const route = useRoute('nested-foo-bar')
     <div>nested/[foo]/[bar].vue</div>
     <div>foo: {{ route.params.foo }}</div>
     <div>bar: {{ route.params.bar }}</div>
+    <NuxtLink id="user-test" to="/nested/foo/user-test">
+      to /nested/foo/user-test
+    </NuxtLink>
+    <NuxtLink id="test" to="/nested/foo/test">
+      to /nested/foo/test
+    </NuxtLink>
   </div>
 </template>

test/fixtures/basic/pages/nested/[foo]/user-[group].vue

@@ -7,5 +7,12 @@ const route = useRoute('nested-foo-user-group')
     <div>nested/[foo]/user-[group].vue</div>
     <div>foo: {{ route.params.foo }}</div>
     <div>group: {{ route.params.group }}</div>
+
+    <NuxtLink id="user-test" to="/nested/foo/user-test">
+      to /nested/foo/user-test
+    </NuxtLink>
+    <NuxtLink id="test" to="/nested/foo/test">
+      to /nested/foo/test
+    </NuxtLink>
   </div>
 </template>