From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Mon, 14 Jun 2021 13:54:54 +0000 (+0200)
Subject: docs: key + transition
X-Git-Tag: v4.0.9~9
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=a11b04f311357b1ee1735e05403be73c428555b6;p=thirdparty%2Fvuejs%2Frouter.git

docs: key + transition

Close #867

Close #854

Close #803
---

diff --git a/docs/guide/advanced/transitions.md b/docs/guide/advanced/transitions.md
index ccfaddf6..26f14303 100644
--- a/docs/guide/advanced/transitions.md
+++ b/docs/guide/advanced/transitions.md
@@ -68,5 +68,17 @@ router.afterEach((to, from) => {
 })
 ```
 
+## Forcing a transition between reused views
+
+Vue might automatically reuse components that look alike, avoiding any transition. Fortunately, it is possible [to add a `key` attribute](https://v3.vuejs.org/api/special-attributes.html#key) to force transitions. This also allows you to trigger transitions while staying on the same route with different params:
+
+```vue
+<router-view v-slot="{ Component, route }">
+  <transition name="fade">
+    <component :is="Component" :key="route.path" />
+  </transition>
+</router-view>
+```
+
 <!-- TODO: interactive example -->
 <!-- See full example [here](https://github.com/vuejs/vue-router/blob/dev/examples/transitions/app.js). -->