Skip to content

Page scroll to top when replace route when route key is defined #31654

@serkodev

Description

@serkodev

Environment


  • Operating System: Linux
  • Node Version: v18.20.3
  • Nuxt Version: 3.16.2
  • CLI Version: 3.24.0
  • Nitro Version: 2.11.8
  • Package Manager: npm@10.2.3
  • Builder: -
  • User Config: compatibilityDate, devtools
  • Runtime Modules: -
  • Build Modules: -

Reproduction

https://stackblitz.com/edit/github-c5oaac3b-jwythaqo?file=pages%2Ffoo%2F%5Bid%5D.vue

  1. Start dev server and go /foo/1
  2. Scroll to bottom click "Update" once, the url changes without scroll to top
  3. Keep click "Update", the url changes and will scroll to top

Describe the bug

function update() {
  const id = Date.now().toString();
  useRouter().replace({ params: { id } });
}

definePageMeta({
  // prevent re-render when id changed
  key: 'foo',
});

In Nuxt <= 3.16.1, when call router's replace, the page will not scroll to top.

Example (3.16.1)
https://stackblitz.com/edit/github-c5oaac3b-n4u8ctf8?file=package.json,package-lock.json

Additional context

Not sure if it related to #31650

Logs

Metadata

Metadata

Assignees

No one assigned

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions