Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-21 21:25:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Julien Huang 2023-09-06 21:44:59 +02:00 committed by GitHub
parent a998cb6e3b
commit 48fb6e243b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 121 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/nuxt/src/pages/runtime/router.options.ts
View File

@ -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)
if (!samePageComponent) {
return true
}
if (samePageComponent && JSON.stringify(from.params) !== JSON.stringify(to.params)) {
return true
}
return false
return to.path !== from.path || JSON.stringify(from.params) !== JSON.stringify(to.params)
}

50
test/basic.test.ts
View File

@ -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', () => {

8
test/fixtures/basic/modules/page-extend.ts → test/fixtures/basic/modules/page-extend/index.ts vendored
View File

@ -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')
})
})
}

36
test/fixtures/basic/modules/page-extend/pages/big-page.vue vendored Normal file
View File

@ -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>

3
test/fixtures/basic/pages/index.vue vendored
View File

@ -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>

11
test/fixtures/basic/pages/nested/[foo]/index.vue → test/fixtures/basic/pages/nested/[foo].vue vendored
View File

@ -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>

6
test/fixtures/basic/pages/nested/[foo]/[bar].vue vendored
View File

@ -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>

7
test/fixtures/basic/pages/nested/[foo]/user-[group].vue vendored
View File

@ -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>