From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Sun, 2 May 2021 16:20:24 +0000 (+0200)
Subject: docs: bigger api example router view slot
X-Git-Tag: v4.0.7~15
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=72278d5cc4b3559b83d6c28e1f6483a778509539;p=thirdparty%2Fvuejs%2Frouter.git

docs: bigger api example router view slot
---

diff --git a/docs/api/index.md b/docs/api/index.md
index ef678e48..99a6bedd 100644
--- a/docs/api/index.md
+++ b/docs/api/index.md
@@ -168,9 +168,21 @@ If you add a `target="_blank"` to your `a` element, you must omit the `@click="n
 `<router-view>` exposes a `v-slot` API mainly to wrap your route components with `<transition>` and `<keep-alive>` components.
 
 ```html
-<router-view v-slot="{ Component, route }">
-  <component :is="Component" />
-</router-view>
+<Suspense>
+  <template #default>
+    <router-view v-slot="{ Component, route }">
+      <transition :name="route.meta.transition || 'fade'" mode="out-in">
+        <keep-alive>
+          <component
+            :is="Component"
+            :key="route.meta.usePathKey ? route.path : undefined"
+          />
+        </keep-alive>
+      </transition>
+    </router-view>
+  </template>
+  <template #fallback> Loading... </template>
+</Suspense>
 ```
 
 - `Component`: VNodes to be passed to a `<component>`'s `is` prop.
diff --git a/docs/zh/api/index.md b/docs/zh/api/index.md
index 7aec807b..47b3eb33 100644
--- a/docs/zh/api/index.md
+++ b/docs/zh/api/index.md
@@ -168,9 +168,21 @@ sidebar: auto
 `<router-view>` 暴露了一个 `v-slot` API，主要使用 `<transition>` 和 `<keep-alive>` 组件来包裹你的路由组件。
 
 ```html
-<router-view v-slot="{ Component, route }">
-  <component :is="Component" />
-</router-view>
+<Suspense>
+  <template #default>
+    <router-view v-slot="{ Component, route }">
+      <transition :name="route.meta.transition || 'fade'" mode="out-in">
+        <keep-alive>
+          <component
+            :is="Component"
+            :key="route.meta.usePathKey ? route.path : undefined"
+          />
+        </keep-alive>
+      </transition>
+    </router-view>
+  </template>
+  <template #fallback> Loading... </template>
+</Suspense>
 ```
 
 - `Component`: 要传递给 `<component>` 的 VNodes `是` prop。