[Performance] Using this.$route inside a computed triggers reactivity while we are changing pages

[RodrigoProjects]

[Performance] Using this.$route inside a computed triggers reactivity while we are changing pages

[danielroe]

The issue comes from vue-router and suspense - we need to ensure that within each suspense fork we have different route objects. We in fact even do custom handling within <template> (injecting a custom route object) and for useRoute...

We probably need to port this fix to this.$route as well, if possible.

[jakubednar]

Just found out that this.$route inside computed is getting triggered twice. Added console.log there while debugging.

[jakubednar]

I did something similar, but i got error thatthis is undefined. But I did it with dynamic regex which supported both ctx and this cases. I'm going to try to handle just this.$route case.

[RodrigoProjects]

Thanks for making the PR for me @jakubednar time saver! <3

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• github-89dmst (Open reproduction)

[jakubednar]

Hello 👋, I started working on this issue, but I got a little stuck. I didn't manage to make it work, but from investigation it looks like this.$route inside computed is not waiting for page:finish hook and it gets the new route object right away.

[danielroe]

@jakubednar This might help. It's how we ensure that we use the provided route rather than this.$route:

nuxt/packages/nuxt/src/pages/plugins/route-injection.ts

Lines 17 to 27 in f209158

	if (!INJECTION_SINGLE_RE.test(code) || code.includes('_ctx._.provides[__nuxt_route_symbol')) { return }
	let replaced = false
	const s = new MagicString(code)
	s.replace(INJECTION_RE, () => {
	replaced = true
	return '(_ctx._.provides[__nuxt_route_symbol] || _ctx.$route)'
	})
	if (replaced) {
	s.prepend('import { PageRouteSymbol as __nuxt_route_symbol } from \'#app/components/injections\';\n')
	}

[RodrigoProjects]

I could create a Vue plugin and overwrite the $route with the Nuxt provided route. What you think of this as potential fix? @danielroe

Doing a replace like you did will be hard for this case when using options API

[jakubednar]

I tried fixing it yesterday, but all I managed to affect was useRoute, $route inside template. Maybe I'm doing something wrong, but I couldn't affect this.$route inside script.
I will be grateful for any help with this.

[RodrigoProjects]

I tried fixing it yesterday, but all I managed to affect was useRoute, $route inside template. Maybe I'm doing something wrong, but I couldn't affect this.$route inside script. I will be grateful for any help with this.

After further investigation, I think you can do something like this:
`js
const INJECTION_RE = /\bthis.$route\b/g
if (!INJECTION_SINGLE_RE.test(code) || code.includes('ctx..provides[__nuxt_route_symbol')) { return }

let replaced = false
const s = new MagicString(code)
s.replace(INJECTION_RE, () => {
replaced = true
return '(this._.provides[__nuxt_route_symbol] || this.$route)'
})
if (replaced) {
s.prepend('import { PageRouteSymbol as __nuxt_route_symbol } from '#app/components/injections';\n')
} `

Did this very fast but I think you get the general idea, do a replace for this.$route too and inject the "nuxt route" and fallback to this.$route like daniel did for the _ctx case!