use of $router inline

[chrisjkellett]

hey,

I am using vue3 with vue-router on a project and there are instances where i use $router.push inline.

<button @click="$router.push('/home')">home</button>

Recently I have setup vue-test-utils (2.4.1) to test using a real router. I followed the instructions here and everything is working fine except in instances where I use $router.push inline as above.

If I refactor this, importing useRouter and creating a function then it all works fine.

So my question is should i not be using $router like this? or is there some additional setup required that I am missing?

Thanks in advance.

[cexbrayat]

Hi @chrisjkellett

Hard to say without seeing the code. Can you provide us a small repro online using https://stackblitz.com/github/vuejs/create-vue-templates/tree/main/typescript-vitest?file=src%2Fcomponents%2F__tests__%2FHelloWorld.spec.ts ?

It only takes a few minutes, and we'll be able to take a look. Maybe there is an issue with what VTU does.

But, if I may, the code you show could be a link no? It's usually better to use <RouterLink to="/home'>Home</RouterLink>

[chrisjkellett]

Hey thanks for the quick response. I will try to prepare a repo this afternoon and post, was struggling a bit to replicate the environment.

As for simply using RouterLink yes this is probably the correct thing to do and I suppose one and perhaps the best solution is to just refactor the code to use that rather than this strange snippet that I provided.