In the NuxT3 project, the Autoplay of swiper.js becomes invalid after the route is switched

[qyn980427]

Environment

---

• Operating System: Windows_NT
• Node Version: v14.17.5
• Nuxt Version: 3.0.0-rc.6
• Package Manager: npm@6.14.14
• Builder: vite
• User Config: -
• Runtime Modules: -
• Build Modules: -

---

Reproduction

https://github.com/qyn980427/nuxt3Test

Describe the bug

When I was using Swiper.js and Swiper of Vant component library in my own project, I encountered the problem of Autoplay failure after route switch. At first I thought it was my problem, but later I felt that it might not be my problem.   Autoplay will become invalid after the route is jumped back

Additional context

Repetition steps

1.When you enter Index for the first time, Swiper is normal
2. On index, use nuxtlink to access the test page
3. On the test page, use nuxtlink to return to the Index page
4.The Autoplay of swiper is invalid

Logs

No response

[danielroe]

Would you try to reproduce via https://stackblitz.com/github/nuxt-contrib/vue3-ssr-starter/tree/main ?

[qyn980427]

Would you try to reproduce via https://stackblitz.com/github/nuxt-contrib/vue3-ssr-starter/tree/main ?

I've tried it and it's fine on this one, but why is the problem I've described happening on NUXT3?

[ikexing-cn]

+1,I have the same problem.

[qyn980427]

Hello, what is wrong with this demo https://stackblitz.com/edit/nuxt-starter-txwyvc

[danielroe]

Yes, it does seem to reproduce only on Nuxt - I asked you to try that other vue3 only repro to confirm - and for future reference, https://stackblitz.com/edit/github-midbdm.

I think the cause might be #13471 (which is an upstream vue issue that reproduces only with the current configuration), but I haven't dived into the swiper codebase to confirm...

[ikexing-cn]

A solution, as seen in #13471
Set <NuxtPage :key="$route.fullPath" /> in your app.vue file and everything works.

[danielroe]

Great. Then I think we can follow this issue there.

[AnatoliiDev]

A solution, as seen in #13471 Set <NuxtPage :key="$route.fullPath" /> in your app.vue file and everything works.

This is not optimal. And in this case you have problem with full reload page after add querry params to url.

[ikexing-cn]

This is not optimal. And in this case you have problem with full reload page after add querry params to url.

You can absolutely judge some query params once and have it not reload.