From 72278d5cc4b3559b83d6c28e1f6483a778509539 Mon Sep 17 00:00:00 2001
From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Sun, 2 May 2021 18:20:24 +0200
Subject: [PATCH] docs: bigger api example router view slot

---
 docs/api/index.md    | 18 +++++++++++++++---
 docs/zh/api/index.md | 18 +++++++++++++++---
 2 files changed, 30 insertions(+), 6 deletions(-)

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。
-- 
2.47.2