docs: use meta.transition

diff --git a/packages/docs/guide/advanced/transitions.md b/packages/docs/guide/advanced/transitions.md
index b824e53e71ea3ef40f7dc46b87fb905ef6496ec1..cc3fe6c97e93b840a31b7c3c830f3ff1cfccea2f 100644 (file)
--- a/packages/docs/guide/advanced/transitions.md
+++ b/packages/docs/guide/advanced/transitions.md
@@ -39,7 +39,7 @@ const routes = [
 ```html
 <router-view v-slot="{ Component, route }">
   <!-- Use any custom transition and  to `fade` -->
-  <transition :name="route.meta.transitionName || 'fade'">
+  <transition :name="route.meta.transition || 'fade'">
     <component :is="Component" />
   </transition>
 </router-view>
@@ -52,7 +52,7 @@ It is also possible to determine the transition to use dynamically based on the
 ```html
 <!-- use a dynamic transition name -->
 <router-view v-slot="{ Component, route }">
-  <transition :name="route.meta.transitionName">
+  <transition :name="route.meta.transition">
     <component :is="Component" />
   </transition>
 </router-view>
@@ -64,7 +64,7 @@ We can add an [after navigation hook](./navigation-guards.md#global-after-hooks)
 router.afterEach((to, from) => {
   const toDepth = to.path.split('/').length
   const fromDepth = from.path.split('/').length
-  to.meta.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
+  to.meta.transition = toDepth < fromDepth ? 'slide-right' : 'slide-left'
 })
 ```
 

diff --git a/packages/docs/zh/guide/advanced/transitions.md b/packages/docs/zh/guide/advanced/transitions.md
index 0735395d5720a9cd9f4abfe513288068df8dbe23..169606d37440e59c4e0d43175dc97e5d0be6bd5d 100644 (file)
--- a/packages/docs/zh/guide/advanced/transitions.md
+++ b/packages/docs/zh/guide/advanced/transitions.md
@@ -39,7 +39,7 @@ const routes = [
 ```html
 <router-view v-slot="{ Component, route }">
   <!-- 使用任何自定义过渡和回退到 `fade` -->
-  <transition :name="route.meta.transitionName || 'fade'">
+  <transition :name="route.meta.transition || 'fade'">
     <component :is="Component" />
   </transition>
 </router-view>
@@ -52,7 +52,7 @@ const routes = [
 ```html
 <!-- 使用动态过渡名称 -->
 <router-view v-slot="{ Component, route }">
-  <transition :name="route.meta.transitionName">
+  <transition :name="route.meta.transition">
     <component :is="Component" />
   </transition>
 </router-view>
@@ -64,7 +64,7 @@ const routes = [
 router.afterEach((to, from) => {
   const toDepth = to.path.split('/').length
   const fromDepth = from.path.split('/').length
-  to.meta.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
+  to.meta.transition = toDepth < fromDepth ? 'slide-right' : 'slide-left'
 })
 ```