test: test scroll top on nested pages and

test/basic.test.ts

@@ -553,6 +553,48 @@ 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()
+    console.log('HOOOOOOHOHO' + await page.evaluate(() => window.scrollY))
+    await page.waitForURL(url => url.href.includes('/big-page-2'))
+    console.log('HAAAAHAHAHA' + await page.evaluate(() => window.scrollY))
+    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'))
+    expect(await page.evaluate(() => window.scrollY)).toBe(0)
+  })
+
+  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'))
+    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'))
+    expect(await page.evaluate(() => window.scrollY)).toBe(0)
+  })
 })
 
 describe('head tags', () => {

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

@@ -4,15 +4,21 @@ export default defineNuxtModule({
   meta: {
     name: 'page-extend'
   },
-  setup () {
+  setup() {
     const nuxt = useNuxt()
     const resolver = createResolver(import.meta.url)
 
     nuxt.hook('pages:extend', (pages) => {
       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: '@/modules/page-extend/pages/big-page.vue'
+      }, {
+        path: '/big-page-2',
+        file: '@/modules/page-extend/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

@@ -49,6 +49,7 @@
     <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]/index.vue → 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,7 @@ 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 to="/nested/foo/user-test" id="user-test">to /nested/foo/user-test</NuxtLink>
+    <NuxtLink to="/nested/foo/test" id="test">to /nested/foo/test</NuxtLink>
   </div>
 </template>

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

@@ -7,5 +7,8 @@ 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 to="/nested/foo/user-test" id="user-test">to /nested/foo/user-test</NuxtLink>
+    <NuxtLink to="/nested/foo/test" id="test">to /nested/foo/test</NuxtLink>
   </div>
 </template>