mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-25 07:05:11 +00:00
fix(nuxt): scroll to top by default on dynamic routes (#22403)
This commit is contained in:
parent
a998cb6e3b
commit
48fb6e243b
@ -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)
|
||||
}
|
||||
|
@ -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', () => {
|
||||
|
@ -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
36
test/fixtures/basic/modules/page-extend/pages/big-page.vue
vendored
Normal 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
3
test/fixtures/basic/pages/index.vue
vendored
@ -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>
|
||||
|
||||
|
@ -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>
|
@ -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,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>
|
||||
|
Loading…
Reference in New Issue
Block a user