CODEWITHSUNDEEP
vue-routervuejs3
hezf
hezf

Reputation: 167

How to keep router’s component not be reused in Vue3.0

I want to use transition,keep-alive,router-view at the same time in App.vue. And I want the router's component not be reused.

This is the doc in vue-router

One thing to note when using routes with params is that when the user navigates from /users/johnny to /users/jolyne, the same component instance will be reused.

in Vue2.x,I can use key to keep router's component not be reused.

<transition>
  <keep-alive>
    <router-view :key="$route.fullPath" ></router-view>
  </keep-alive>
</transition>

But in Vue3.0 the code is like below.

<router-view v-slot="{ Component }">
  <transition>
    <keep-alive>
      <component :is="Component" />
    </keep-alive>
  </transition>
</router-view>

Someone can help to keep router's component not be reused in Vue3.0? use key in router-view cant work.

Upvotes: 2

Views: 859

Answers (1)

hezf
hezf

Reputation: 167

The answer was provided as a comment by Michal Levý:
Place :key="$route.fullPath" on <component>

Upvotes: 1

Related Questions