`\r\n\r\nThere is a workaround to use `useRouter().currentRoute.value` which we found in #20471\r\n\r\nIt seems similar to #20471 but different situation, so may be it is expected behaviour, however it has changed from past behaviour.\r\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3031,3034],{"name":3032,"color":3033},"bug","d73a4a",{"name":3035,"color":3036},"🔨 p3-minor","FBCA04",28650,"closed","`useRoute` params are stale in `asyncData` of `defineNuxtComponent`","2024-09-05T07:56:02Z","https://github.com/nuxt/nuxt/issues/28650",0.64463866,{"description":3044,"labels":3045,"number":3047,"owner":3022,"repository":3022,"state":3038,"title":3048,"updated_at":3049,"url":3050,"score":3051},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v23.6.0`\n- Nuxt Version: `3.15.4`\n- CLI Version: `3.21.1`\n- Nitro Version: `2.10.4`\n- Package Manager: `npm@11.1.0`\n- Builder: `-`\n- User Config: `devtools`, `app`, `routeRules`, `modules`, `runtimeConfig`, `css`, `build`, `ssr`, `spaLoadingTemplate`, `experimental`, `primevue`, `i18n`, `compatibilityDate`, `turnstile`\n- Runtime Modules: `@nuxtjs/tailwindcss@6.12.1`, `@pinia/nuxt@0.5.1`, `@primevue/nuxt-module@4.1.1`, `@nuxtjs/i18n@8.3.1`, `@nuxt/eslint@0.3.13`, `@nuxtjs/turnstile@0.9.10`, `@sentry/nuxt/module@8.55.0`\n- Build Modules: `-`\n\n### Reproduction\n\n[https://stackblitz.com/edit/github-iy4axfop?file=pages%2Fpage2.vue](https://stackblitz.com/edit/github-iy4axfop?file=pages%2Fpage2.vue)\n\n### Describe the bug\n\nWhen doing client-side navigation from one page to another and the second page (the page we are navigating to) is using the useRoute() hook in its setup method. The hook will still contain data from the previous page (path, params, ...). So for example when fetching data in the setup method with useAsyncData will cause issues as the path is not correct and will not contain desired data.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3046],{"name":3032,"color":3033},30977,"useRoute() is containing data from previous page when performing client-side navigation","2025-02-20T15:20:35Z","https://github.com/nuxt/nuxt/issues/30977",0.65896946,{"description":3053,"labels":3054,"number":3059,"owner":3022,"repository":3022,"state":3038,"title":3060,"updated_at":3061,"url":3062,"score":3063},"### Environment\r\n\r\nStackblitz\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/github-xfixy7?file=pages%2Fabout%2F%5Bid%5D.vue\r\n\r\n### Describe the bug\r\n\r\nI have observed a very strange behavior regarding Suspense and async components. If I have an async call before I access the route using `useRoute()` composable then I will get old route (the route info of previous page). But if I move the `const route = useRoute()` before the async call then I will get the info about the current route correctly. I'll put the two code examples below.\r\n\r\nThis is very strange, I can't understand what is going on here. If this is expected behavior then please explain how it works because I could not find anything on the documentation about this.\r\n\r\nPlease check the reproduction link on Stackblitz - https://stackblitz.com/edit/github-xfixy7?file=pages%2Fabout%2F%5Bid%5D.vue\r\n\r\nSo for example, if I do this then I will not get the current route info (instead I am getting old route info): 😲\r\n\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cdiv>About\u003C/div>\r\n\r\n \u003CNuxtLink to=\"/\">Index\u003C/NuxtLink>\r\n\r\n {{ route.params }}\r\n\u003C/template>\r\n\r\n\u003Cscript setup>\r\n const sleep = (ms) => {\r\n return new Promise(resolve => setTimeout(resolve, ms))\r\n }\r\n\r\n const myFunc = async () => {\r\n await sleep(100)\r\n\r\n const route = useRoute()\r\n\r\n // Old route info !!! 👇️ 😟\r\n // Path: /\r\n // Params: {}\r\n console.log(route)\r\n }\r\n\r\n await myFunc()\r\n\u003C/script>\r\n```\r\n\r\nBut if I move the `useRoute()` call two lines up then it will work as expected and I will get the info about the new route: 👍🏻 \r\n\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cdiv>About\u003C/div>\r\n\r\n \u003CNuxtLink to=\"/\">Index\u003C/NuxtLink>\r\n\r\n {{ route.params }}\r\n\u003C/template>\r\n\r\n\u003Cscript setup>\r\n const sleep = (ms) => {\r\n return new Promise(resolve => setTimeout(resolve, ms))\r\n }\r\n\r\n const myFunc = async () => {\r\n const route = useRoute()\r\n\r\n await sleep(100)\r\n\r\n // Now it works as expected 👍️\r\n // Path: /about/1\r\n // Params: { id: 1 }\r\n console.log(route)\r\n }\r\n\r\n await myFunc()\r\n\u003C/script>\r\n\r\n```\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[3055,3058],{"name":3056,"color":3057},"3.x","29bc7f",{"name":3019,"color":3020},25114,"Seeing old route information when using useRoute() with async components","2024-01-09T10:39:35Z","https://github.com/nuxt/nuxt/issues/25114",0.659362,{"description":3065,"labels":3066,"number":3069,"owner":3022,"repository":3022,"state":3038,"title":3070,"updated_at":3071,"url":3072,"score":3073},"### Environment\n\n\"nuxt\": \"^3.9.3\",\r\n\"vue\": \"^3.4.14\",\r\n\"vue-router\": \"^4.2.5\"\n\n### Reproduction\n\ngithub repo https://github.com/Yaxnice301/bugreport.git\r\n\r\n\r\nhttps://github.com/nuxt/nuxt/assets/141637740/8a9df018-4c05-4e7e-b706-5a1b76386902\r\n\r\n\n\n### Describe the bug\n\nThe path displayed in my Route is different from the address in the web address.\r\nAnd when refreshed, it will also jump to other pages\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3067,3068],{"name":3056,"color":3057},{"name":3019,"color":3020},25352,"`useRoute()` returns old path","2024-06-17T10:56:20Z","https://github.com/nuxt/nuxt/issues/25352",0.6642878,{"description":3075,"labels":3076,"number":3079,"owner":3022,"repository":3022,"state":3038,"title":3080,"updated_at":3081,"url":3082,"score":3083},"### Environment\n\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.18.0\r\n- Nuxt Version: 3.7.4\r\n- CLI Version: 3.9.0\r\n- Nitro Version: 2.6.3\r\n- Package Manager: npm@9.4.2\r\n- Builder: -\r\n- User Config: -\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-tmvnrq?file=layouts%2Fdefault.vue\n\n### Describe the bug\n\nInconsistent behavior exists between two versions of `useRoute`. The one imported from `vue-router` functions as expected, while the other from Nuxt causes the component to render twice (mount -> unmount -> then mount again). This behavior leads to a performance penalty, particularly on pages with heavy computation.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3077,3078],{"name":3056,"color":3057},{"name":3019,"color":3020},23488,"Using `useRoute` from auto-import makes the page component render twice.","2023-10-01T19:41:21Z","https://github.com/nuxt/nuxt/issues/23488",0.6652952,{"description":3085,"labels":3086,"number":3094,"owner":3022,"repository":3022,"state":3038,"title":3095,"updated_at":3096,"url":3097,"score":3098},"During development (`nuxt dev`), if using `nuxt-i18n` (more specifically `vue-i18n`) and navigating to a route in another locale, the `asyncData` of the page component is called twice.\r\n\r\n(And also the `route` object within the `asyncData` is not set up correctly.)\r\n\r\n### Versions\r\n\r\n- nuxt: v2.15.4\r\n\r\n### Reproduction\r\n\r\nhttps://codesandbox.io/s/nuxtjs-bug-dev-vue-i18n-asyncdata-5fwl7\r\n\r\n### Steps to reproduce\r\n\r\n1. Set up `nuxt-i18n` with two locales\r\n2. Create a page component that defines an `asyncData` hook\r\n3. Create `nuxt-link` that navigates to a route in another locale.\r\n4. Click the link to navigate to a route in another locale\r\n\r\n### What is Expected?\r\n\r\n - The `asyncData` is triggered once\r\n - Checking the `context.route.path` from `asyncData` reports the new (target) route path.\r\n\r\n### What is actually happening?\r\n\r\n - The `asyncData` is triggered twice\r\n - Checking the `context.route.path` from `asyncData` reports a wrong (old) route both times.\r\n\r\n### Additional details\r\n\r\nSee also https://github.com/nuxt-community/i18n-module/issues/1160\r\n\r\nHere is what is happening:\r\n\r\n`vue-i18n` calls `VueComponent.$forceUpdate()` on locale change: https://github.com/kazupon/vue-i18n/blob/13f3e618d5a7c3c32fe99f156d1ee2b4e199a5a4/src/index.js#L250-L259\r\n\r\nIn dev mode, Nuxt implements/overrides `$forceUpdate` to trigger, amongst others, an `asyncData` call: https://github.com/nuxt/nuxt.js/blob/8e2cad5a8fd7c4fa731fea92d762b650ee5ce095/packages/vue-app/template/client.js#L740-L746\r\n\r\nThis is only a problem during development since it's related to \"hot reload\" which is not enabled otherwise.\r\n\r\nThat custom `$forceUpdate` function also does set the route on the context which doesn't seem right in this case as there is a pending transition to another route at that time already.\r\n\r\nMaybe the `$forceUpdate` logic should be skipped entirely if there is a pending route transition? Can't say for sure as I don't know that code but that's the first thing that came to my mind.",[3087,3090,3091],{"name":3088,"color":3089},"stale","ffffff",{"name":3019,"color":3020},{"name":3092,"color":3093},"2.x","d4c5f9",9209,"asyncData called twice in developer mode with nuxt-i18n enabled","2023-01-22T15:44:51Z","https://github.com/nuxt/nuxt/issues/9209",0.6674346,{"description":3100,"labels":3101,"number":3103,"owner":3022,"repository":3022,"state":3038,"title":3104,"updated_at":3105,"url":3106,"score":3107},"### Environment\n\n- Operating System: `Darwin`\r\n- Node Version: `v18.16.0`\r\n- Nuxt Version: `3.6.5`\r\n- Nitro Version: `2.5.2`\r\n- Package Manager: `yarn@1.22.19`\r\n- Builder: `vite`\r\n- User Config: `telemetry`, `modules`, `pinia`\r\n- Runtime Modules: `@pinia/nuxt@0.4.11`\r\n- Build Modules: `-`\r\n\n\n### Reproduction\n\nhttps://codesandbox.io/p/sandbox/sad-lake-cjxzvt?file=/stores/test.ts:10,6\n\n### Describe the bug\n\n1. Visit the reproduction link\r\n2. Click on any `/?id=1..n` button to change the id value on the route URL.\r\n3. The value of `currentData` getter is updated correctly ✅\r\n4. Click the `/home` link.\r\n5. At the home page, click on any `/?id=1..n` button to navigate back to the index page.\r\n6. Repeat step no. 2, but this time, the value of getter will not be updated ❌\r\n\r\n\r\n\n\n### Additional context\n\n- In the sandbox above, this bug happen. In the localhost, you have to build production to reproduce the bug\r\n\r\n```bash\r\nnpx nuxi generate\r\nnpx nuxi preview\r\n```\r\n\r\n- This happen when navigate to the page in client side. If you enter the page from URL, the getter still working.\r\n- If I turn of the ssr from the nuxt config. And move the useRoute statement inside the computed/getter, it works.\r\n\r\n```diff\r\n- const route = useRoute();\r\n const currentData = computed(() => {\r\n+ const route = useRoute();\r\n const index = Number(route.query.id || 1);\r\n return data.value[index];\r\n });\r\n```\r\nHowever this code never working on server side, cuz the `useRoute()` is call outside the setup context.\r\n\r\n- I already open a issue on pinia repo (https://github.com/vuejs/pinia/issues/2361). However, adding a manual import from vue-router does fix it:\r\n\r\n```ts\r\nimport { useRoute } from 'vue-router'\r\n```\n\n### Logs\n\n_No response_",[3102],{"name":3019,"color":3020},22752,"Automatic import of `useRoute` is not working properly on production build","2024-09-05T04:39:03Z","https://github.com/nuxt/nuxt/issues/22752",0.6685177,{"labels":3109,"number":3117,"owner":3022,"repository":3022,"state":3038,"title":3118,"updated_at":3119,"url":3120,"score":3121},[3110,3111,3114],{"name":3056,"color":3057},{"name":3112,"color":3113},"upstream","E8A36D",{"name":3115,"color":3116},"upstream-bug","B60205",13814,"`useAsyncData` clears out nested route data before leaving","2023-05-12T05:56:28Z","https://github.com/nuxt/nuxt/issues/13814",0.6688489,{"description":3123,"labels":3124,"number":3129,"owner":3022,"repository":3022,"state":3038,"title":3130,"updated_at":3131,"url":3132,"score":3133},"### Environment\r\n\r\n- Operating System: `Darwin`\r\n- Node Version: `v18.7.0`\r\n- Nuxt Version: `3.0.0-rc.8`\r\n- Package Manager: `yarn@1.22.19`\r\n- Builder: `vite`\r\n- User Config: `modules`, `css`, `colorMode`, `vite`, `app`\r\n- Runtime Modules: `nuxt-windicss@2.5.0`, `@pinia/nuxt@0.3.1`, `@nuxtjs/color-mode@3.1.4`, `@nuxt/image-edge@1.0.0-27657146.da85542`\r\n- Build Modules: `-`\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/github-izskfd?file=components/Book.vue\r\n\r\n### Describe the bug\r\n\r\nuseRoute(), nuxt default provided function, has previous route information, and not updated on moving page.\r\n\r\nBut using `import { useRoute } from vue-router`, resolve all problems.\r\n\r\nIs there any point I missed?\r\n\r\n### Additional context\r\n\r\nrc.6 doesn't have problems but rc.8 has.\r\n\r\nIt just occurred as soon as updating from rc.6 to rc.8\r\n\r\n### Logs\r\n\r\n_No response_",[3125,3128],{"name":3126,"color":3127},"documentation","5319e7",{"name":3035,"color":3036},14595,"auto-imported `useRoute()` from nuxt requires use of `\u003CNuxtPage>`","2025-06-03T13:52:48Z","https://github.com/nuxt/nuxt/issues/14595",0.671533,["Reactive",3135],{},["Set"],["ShallowReactive",3138],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f0506KGV5nxtBt0PmpkZjsHOT9uKC9GdeVa9lehwpEN8":-1},"/nuxt/nuxt/32553"]