warning about 'Calling 'useRoute' within middleware may lead to misleading results' when it is in the '<script setup>' of the SFC component

[n0099]

Environment

• Operating System: Linux
• Node Version: v22.8.0
• Nuxt Version: 3.13.1
• CLI Version: 3.13.1
• Nitro Version: 2.9.7
• Package Manager: yarn@4.4.1
• Builder: -
• User Config: compatibilityDate, devServer, devtools, srcDir, imports, modules, pinia, eslint, vueQuery, site, sitemap, ogImage, schemaOrg, features, sourcemap, build, vite, experimental, runtimeConfig
• Runtime Modules: @nuxt/eslint@0.5.6, @pinia/nuxt@0.5.4, @vueuse/nuxt@11.0.3, @ant-design-vue/nuxt@1.4.2, @hebilicious/vue-query-nuxt@0.3.0, @vesp/nuxt-fontawesome@1.1.0, @nuxtjs/seo@2.0.0-rc.21
• Build Modules: -

Reproduction

git clone https://github.com/n0099/open-tbm && cd open-tbm
git checkout e7c516a2ac5bad2e726074fe9155c9b93c940df0
cd fe
yarn
cat <<'ENV' > .env
NUXT_APP_BASE_URL=/tbm
NUXT_SITE_URL=https://localhost
NUXT_PUBLIC_BE_URL=https://n0099.net/tbm/be
ENV
yarn dev

access https://localhost/tbm/posts/fid/228500/cursor/vNcpHQI,bLKIZg,lMJmGCM,mKqzZg,W3eEFSM,kuKoZg in browser and open devtools scroll to the bottom of page and click the button with text 下一页 you can see many console.warn() with callstack at https://github.com/n0099/open-tbm/blob/e7c516a2ac5bad2e726074fe9155c9b93c940df0/fe/src/components/post/badge/Common.vue#L49

Describe the bug

https://github.com/nuxt/nuxt/blob/d5cf409ddca078266bd71ca011b9bc6ed6e58e05/packages/nuxt/src/app/composables/router.ts#L21-L22 https://github.com/nuxt/nuxt/blob/d5cf409ddca078266bd71ca011b9bc6ed6e58e05/packages/nuxt/src/app/composables/router.ts#L81-L84 https://github.com/nuxt/nuxt/blob/d5cf409ddca078266bd71ca011b9bc6ed6e58e05/packages/nuxt/src/pages/runtime/plugins/router.ts#L193 https://github.com/nuxt/nuxt/blob/d5cf409ddca078266bd71ca011b9bc6ed6e58e05/packages/nuxt/src/app/plugins/router.ts#L245

Additional context

No response

Logs

No response

[github-actions[bot]]

Stackblitz link for the reproduction: Stackblitz

[danielroe]

Looks like a complex app. Would you be able to provide a minimal reproduction? 🙏

[github-actions[bot]]

Would you be able to provide a reproduction? 🙏

More info

### Why do I need to provide a reproduction? Reproductions make it possible for us to triage and fix issues quickly with a relatively small team. It helps us discover the source of the problem, and also can reveal assumptions you or we might be making. ### What will happen? If you've provided a reproduction, we'll remove the label and try to reproduce the issue. If we can, we'll mark it as a bug and prioritize it based on its severity and how many people we think it might affect. If `needs reproduction` labeled issues don't receive any substantial activity (e.g., new comments featuring a reproduction link), we'll close them. That's not because we don't care! At any point, feel free to comment with a reproduction and we'll reopen it. ### How can I create a reproduction? We have a couple of templates for starting with a minimal reproduction: 👉 https://stackblitz.com/github/nuxt/starter/tree/v3-stackblitz 👉 https://codesandbox.io/s/github/nuxt/starter/v3-codesandbox A public GitHub repository is also perfect. 👌 Please ensure that the reproduction is as **minimal** as possible. See more details [in our guide](https://nuxt.com/docs/community/reporting-bugs/#create-a-minimal-reproduction). You might also find these other articles interesting and/or helpful: - [The Importance of Reproductions](https://antfu.me/posts/why-reproductions-are-required) - [How to Generate a Minimal, Complete, and Verifiable Example](https://stackoverflow.com/help/minimal-reproducible-example)

[n0099]

scroll to the bottom of page and click the button with text 下一页

In fact this step should be repeated two times, the first time to click that button won't trigger this.

I fixed this by changing the inline-function style v-on event handler on that button which wrapping an async function with plain method or inline handler:

-@clickNextPage="async () => await fetchNextPage()"
+@clickNextPage="fetchNextPage()"
+@clickNextPage="fetchNextPage"

[n0099]

I fixed this by changing...

It's still reproducible :(

[danielroe]

You should not call use useRoute in a click handler. Call it in your setup function and use the route object in the click handler

[n0099]

useRoute in a click handler

I'm not. https://github.com/n0099/open-tbm/blob/e7c516a2ac5bad2e726074fe9155c9b93c940df0/fe/src/components/post/badge/Common.vue#L49 It's in a <script setup> of SFC.

[danielroe]

(Just mentioned in case. I'm still waiting for a minimal reproduction to check in more detail.)

[n0099]

~It seems that prevent re-render <NuxtPage> when changing route can fix this even with @clickNextPage="async () => await fetchNextPage()"~

-    <NuxtPage />
+    <NuxtPage :pageKey="route => route.path.split('/')[1]" />

No it's still reproducible. About minimal reprod: I tried to make one: https://codesandbox.io/p/devbox/new-water-vxj48t but it won't reproduce.