docs(zh): update zh docs from en and format some en docs (#1350)

Co-authored-by: edison <daiwei521@126.com>

docs/.vitepress/components/VueSchoolLink.vue

@@ -6,17 +6,19 @@
       rel="sponsored noopener"
       :title="title"
     >
-      <slot>Watch a free video lesson on Vue School</slot>
+      <slot>{{ translations[site.lang]}}</slot>
     </a>
   </div>
 </template>
-<script>
-export default {
-  props: {
-    href: { type: String, required: true },
-    title: { type: String, required: true },
-  },
+<script setup lang="ts">
+import { useData } from 'vitepress'
+
+const { site } = useData()
+const translations = {
+  'en-US': 'Watch a free video lesson on Vue School',
+  'zh-CN': '在 Vue School 上观看免费视频课程',
 }
+defineProps<{ href: string; title: string }>()
 </script>
 <style scoped>
 .vueschool {

docs/api/index.md

@@ -799,8 +799,7 @@ Route record that can be provided by the user when adding routes via the [`route
 - **Type**: `string`
 - **Details**:
 
-  Path of the record. Should start with `/` unless the record is the child of another record.
-  Can define parameters: `/users/:id` matches `/users/1` as well as `/users/posva`.
+  Path of the record. Should start with `/` unless the record is the child of another record. Can define parameters: `/users/:id` matches `/users/1` as well as `/users/posva`.
 
 - **See Also**: [Dynamic Route Matching](../guide/essentials/dynamic-matching.md)
 
@@ -809,10 +808,7 @@ Route record that can be provided by the user when adding routes via the [`route
 - **Type**: `RouteLocationRaw | (to: RouteLocationNormalized) => RouteLocationRaw` (Optional)
 - **Details**:
 
-  Where to redirect if the route is directly matched. The redirection happens
-  before any navigation guard and triggers a new navigation with the new target
-  location. Can also be a function that receives the target route location and
-  returns the location we should redirect to.
+  Where to redirect if the route is directly matched. The redirection happens before any navigation guard and triggers a new navigation with the new target location. Can also be a function that receives the target route location and returns the location we should redirect to.
 
 ### children
 
@@ -828,9 +824,7 @@ Route record that can be provided by the user when adding routes via the [`route
 - **Type**: `string | string[]` (Optional)
 - **Details**:
 
-  Aliases for the route. Allows defining extra paths that will behave like a
-  copy of the record. This enables paths shorthands like `/users/:id` and
-  `/u/:id`. **All `alias` and `path` values must share the same params**.
+  Aliases for the route. Allows defining extra paths that will behave like a copy of the record. This enables paths shorthands like `/users/:id` and `/u/:id`. **All `alias` and `path` values must share the same params**.
 
 ### name
 
@@ -851,18 +845,19 @@ Route record that can be provided by the user when adding routes via the [`route
 - **Type**: `boolean | Record<string, any> | (to: RouteLocationNormalized) => Record<string, any>` (Optional)
 - **Details**:
 
-  Allows passing down params as props to the component rendered by `router-view`. When passed to a _multiple views record_, it should be an object with the same keys as `components` or a `boolean` to be applied to each component.
-  target location.
+  Allows passing down params as props to the component rendered by `router-view`. When passed to a _multiple views record_, it should be an object with the same keys as `components` or a `boolean` to be applied to each component.target location.
 
 - **See Also**: [Passing props to Route Components](../guide/essentials/passing-props.md)
 
 ### sensitive
+
 - **Type**: `boolean` (Optional) 
 - **Details**: 
 
   Makes the route matching case sensitive, defaults to `false`. Note this can also be set at a route level.
 
 ### strict
+
 - **Type**: `boolean` (Optional) 
 - **Details**: 
 

docs/guide/advanced/navigation-failures.md

@@ -93,7 +93,6 @@ When returning a new location inside of a Navigation Guard, we are triggering a
 ```js
 await router.push('/my-profile')
 if (router.currentRoute.value.redirectedFrom) {
-  // redirectedFrom is resolved route location like to and from in navigation
-  // guards
+  // redirectedFrom is resolved route location like to and from in navigation guards
 }
 ```

docs/guide/advanced/navigation-guards.md

@@ -201,16 +201,13 @@ const UserDetails = {
     // because it has not been created yet when this guard is called!
   },
   beforeRouteUpdate(to, from) {
-    // called when the route that renders this component has changed,
-    // but this component is reused in the new route.
-    // For example, given a route with params `/users/:id`, when we
-    // navigate between `/users/1` and `/users/2`, the same `UserDetails` component instance
-    // will be reused, and this hook will be called when that happens.
+    // called when the route that renders this component has changed, but this component is reused in the new route.
+    // For example, given a route with params `/users/:id`, when we navigate between `/users/1` and `/users/2`,
+    // the same `UserDetails` component instance will be reused, and this hook will be called when that happens.
     // Because the component is mounted while this happens, the navigation guard has access to `this` component instance.
   },
   beforeRouteLeave(to, from) {
-    // called when the route that renders this component is about to
-    // be navigated away from.
+    // called when the route that renders this component is about to be navigated away from.
     // As with `beforeRouteUpdate`, it has access to `this` component instance.
   },
 }

docs/zh/api/index.md

@@ -124,7 +124,7 @@ sidebar: auto
 
 ### 示例：将激活的 class 应用在外层元素
 
-有的时候我们可能想把激活的 class 应用到一个外部元素而不是 `<a>` 标签本身，这时你可以在一个 `router-link` 中包裹该元素并使用 `v-slot` 属性来创建链接：
+有时我们可能想把激活的 class 应用到一个外部元素而不是 `<a>` 标签本身，这时你可以在一个 `router-link` 中包裹该元素并使用 `v-slot` 属性来创建链接：
 
 ```html
 <router-link
@@ -168,21 +168,21 @@ sidebar: auto
 `<router-view>` 暴露了一个 `v-slot` API，主要使用 `<transition>` 和 `<keep-alive>` 组件来包裹你的路由组件。
 
 ```html
-<Suspense>
-  <template #default>
-    <router-view v-slot="{ Component, route }">
-      <transition :name="route.meta.transition || 'fade'" mode="out-in">
-        <keep-alive>
+<router-view v-slot="{ Component, route }">
+  <transition :name="route.meta.transition || 'fade'" mode="out-in">
+    <keep-alive>
+      <suspense>
+        <template #default>
           <component
             :is="Component"
             :key="route.meta.usePathKey ? route.path : undefined"
           />
-        </keep-alive>
-      </transition>
-    </router-view>
-  </template>
-  <template #fallback> Loading... </template>
-</Suspense>
+        </template>
+        <template #fallback> Loading... </template>
+      </suspense>
+    </keep-alive>
+  </transition>
+</router-view>
 ```
 
 - `Component`: 要传递给 `<component>` 的 VNodes `是` prop。
@@ -601,7 +601,7 @@ _参数_
 
 | 参数    | 类型                                                                              | 描述                      |
 | ------- | --------------------------------------------------------------------------------- | ------------------------- |
-| handler | `(error: any, to: RouteLocationNormalized, from: RouteLocationNormalized) => any` | error handler to register |
+| handler | `(error: any, to: RouteLocationNormalized, from: RouteLocationNormalized) => any` | 注册的错误处理程序 |
 
 ### push
 
@@ -816,8 +816,7 @@ stringifyQuery?: (
 - **类型**：`string | string[]` (可选)
 - **详细内容**：
 
-  路由的别名。允许定义类似记录副本的额外路由。这使得路由可以简写为像这种 `/users/:id` 和
-  `/u/:id`。 **所有的 `alias` 和 `path` 值必须共享相同的参数**。
+  路由的别名。允许定义类似记录副本的额外路由。这使得路由可以简写为像这种 `/users/:id` 和 `/u/:id`。 **所有的 `alias` 和 `path` 值必须共享相同的参数**。
 
 ### name
 
@@ -838,10 +837,24 @@ stringifyQuery?: (
 - **类型**：`boolean | Record<string, any> | (to: RouteLocationNormalized) => Record<string, any>` (可选)
 - **详细内容**：
 
-  允许将参数作为 props 传递给由 `router-view` 渲染的组件。当传递给一个*多视图记录*时，它应该是一个与`组件`具有相同键的对象，或者是一个应用于每个组件的`布尔值`。
+  允许将参数作为 props 传递给由 `router-view` 渲染的组件。当传递给一个**多视图记录**时，它应该是一个与`组件`具有相同键的对象，或者是一个应用于每个组件的`布尔值`。
 
 - **更多的内容请看**：[给路由组件传 props](../guide/essentials/passing-props.md)
 
+### sensitive
+
+- **类型**: `boolean` (可选) 
+- **详细内容**: 
+
+  使路由匹配区分大小写，默认为`false`。注意这也可以在路由级别上设置。
+
+### strict
+
+- **类型**: `boolean` (可选) 
+- **详细内容**: 
+
+  严格检查路径末尾是否有尾部斜线（`/`）。默认为 `false`，意味着默认情况下，路由 `/users` 同时匹配 `/users` 和 `/users/`。注意这也可以在路由级别上设置。
+
 ### meta
 
 - **类型**：[`RouteMeta`](#routemeta) (可选)
@@ -890,7 +903,7 @@ const routes = [{ path: '/', component: HomeView }]
 - **类型**：标准化[路由记录](#routerecordnormalized)数组
 - **详细内容**：
 
-  当前路由的子路由记录。如果没有则为空数组。
+  路由被添加时的子路由记录。如果没有则为空数组。注意这个数组在 `addRoute()` 和 `removeRoute()` 被调用时不会更新。
 
 ### components
 

docs/zh/guide/advanced/composition-api.md

@@ -1,5 +1,10 @@
 # Vue Router 和 组合式 API
 
+<VueSchoolLink
+  href="https://vueschool.io/lessons/router-and-the-composition-api"
+  title="Learn how to use Vue Router with the composition API"
+/>
+
 引入 `setup` 和 Vue 的[组合式 API](https://v3.vuejs.org/guide/composition-api-introduction.html)，开辟了新的可能性，但要想充分发挥 Vue Router 的潜力，我们需要使用一些新的函数来代替访问 `this` 和组件内导航守卫。
 
 ## 在 `setup` 中访问路由和当前路由
@@ -26,10 +31,11 @@ export default {
 }
 ```
 
-`route` 对象是一个响应式对象，所以它的任何属性都可以被监听，但你应该**避免监听整个 `route`** 对象：
+`route` 对象是一个响应式对象，所以它的任何属性都可以被监听，但你应该**避免监听整个 `route`** 对象。在大多数情况下，你应该直接监听你期望改变的参数。
 
 ```js
 import { useRoute } from 'vue-router'
+import { ref, watch } from 'vue'
 
 export default {
   setup() {
@@ -38,9 +44,9 @@ export default {
 
     // 当参数更改时获取用户信息
     watch(
-      () => route.params,
-      async newParams => {
-        userData.value = await fetchUser(newParams.id)
+      () => route.params.id,
+      async newId => {
+        userData.value = await fetchUser(newId)
       }
     )
   },
@@ -55,6 +61,7 @@ export default {
 
 ```js
 import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
+import { ref } from 'vue'
 
 export default {
   setup() {
@@ -88,6 +95,7 @@ Vue Router 将 RouterLink 的内部行为作为一个组合式 API 函数公开
 
 ```js
 import { RouterLink, useLink } from 'vue-router'
+import { computed } from 'vue'
 
 export default {
   name: 'AppLink',

docs/zh/guide/advanced/data-fetching.md

@@ -55,7 +55,6 @@ export default {
       this.error = this.post = null
       this.loading = true
       // replace `getPost` with your data fetching util / API wrapper
-      // 用你的数据获取 util 或 API 替换 `getPost`
       getPost(this.$route.params.id, (err, post) => {
         this.loading = false
         if (err) {

docs/zh/guide/advanced/dynamic-routing.md

@@ -1,5 +1,10 @@
 # 动态路由
 
+<VueSchoolLink
+  href="https://vueschool.io/lessons/vue-router-4-dynamic-routing"
+  title="Learn how to add routes at runtime"
+/>
+
 对路由的添加通常是通过 [`routes` 选项](../../api/#routes)来完成的，但是在某些情况下，你可能想在应用程序已经运行的时候添加或删除路由。具有可扩展接口(如 [Vue CLI UI](https://cli.vuejs.org/dev-guide/ui-api.html) )这样的应用程序可以使用它来扩展应用程序。
 
 ## 添加路由

docs/zh/guide/advanced/extending-router-link.md

@@ -1,5 +1,10 @@
 # 扩展 RouterLink
 
+<VueSchoolLink
+  href="https://vueschool.io/lessons/extending-router-link-for-external-urls"
+  title="Learn how to extend router-link"
+/>
+
 RouterLink 组件提供了足够的 `props` 来满足大多数基本应用程序的需求，但它并未尝试涵盖所有可能的用例，在某些高级情况下，你可能会发现自己使用了 `v-slot`。在大多数中型到大型应用程序中，值得创建一个（如果不是多个）自定义 RouterLink 组件，以在整个应用程序中重用它们。例如导航菜单中的链接，处理外部链接，添加 `inactive-class` 等。
 
 让我们扩展 RouterLink 来处理外部链接，并在 `AppLink.vue` 文件中添加一个自定义的 `inactive-class`：
@@ -31,6 +36,7 @@ import { RouterLink } from 'vue-router'
 
 export default {
   name: 'AppLink',
+  inheritAttrs: false,
 
   props: {
     // 如果使用 TypeScript，请添加 @ts-ignore
@@ -62,11 +68,8 @@ export default {
   },
 
   setup(props) {
-    // toRef 允许我们提取一个 prop 并保持它的响应
-    // https://v3.vuejs.org/api/refs-api.html#toref
-    const { navigate, href, route, isActive, isExactActive } = useLink(
-      toRef(props, 'to')
-    )
+    // `props` 包含 `to` 和任何其他可以传递给 <router-link> 的 prop
+    const { navigate, href, route, isActive, isExactActive } = useLink(props)
 
     // profit!
 
@@ -89,4 +92,3 @@ export default {
   </AppLink>
 </template>
 ```
-

docs/zh/guide/advanced/lazy-loading.md

@@ -1,5 +1,10 @@
 # 路由懒加载
 
+<VueSchoolLink
+  href="https://vueschool.io/lessons/lazy-loading-routes-vue-cli-only"
+  title="Learn about lazy loading routes"
+/>
+
 当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更加高效。
 
 Vue Router 支持开箱即用的[动态导入](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Dynamic_Imports)，这意味着你可以用动态导入代替静态导入：
@@ -37,6 +42,8 @@ const UserDetails = () =>
 
 ## 把组件按组分块
 
+### 使用 webpack
+
 有时候我们想把某个路由下的所有组件都打包在同个异步块 (chunk) 中。只需要使用[命名 chunk](https://webpack.js.org/guides/code-splitting/#dynamic-imports)，一个特殊的注释语法来提供 chunk name (需要 Webpack > 2.4)：
 
 ```js
@@ -49,3 +56,26 @@ const UserProfileEdit = () =>
 ```
 
 webpack 会将任何一个异步模块与相同的块名称组合到相同的异步块中。
+
+### 使用 Vite
+
+在Vite中，你可以在[`rollupOptions`](https://vitejs.dev/config/#build-rollupoptions)下定义分块：
+
+```js
+// vite.config.js
+export default defineConfig({
+  build: {
+    rollupOptions: {
+      // https://rollupjs.org/guide/en/#outputmanualchunks
+      output: {
+        manualChunks: {
+          'group-user': [
+            './src/UserDetails',
+            './src/UserDashboard',
+            './src/UserProfileEdit',
+          ],
+        },
+    },
+  },
+})
+```

docs/zh/guide/advanced/meta.md

@@ -1,5 +1,10 @@
 # 路由元信息
 
+<VueSchoolLink
+  href="https://vueschool.io/lessons/route-meta-fields"
+  title="Learn how to use route meta fields"
+/>
+
 有时，你可能希望将任意信息附加到路由上，如过渡名称、谁可以访问路由等。这些事情可以通过接收属性对象的`meta`属性来实现，并且它可以在路由地址和导航守卫上都被访问到。定义路由的时候你可以这样配置 `meta` 字段：
 
 ```js

docs/zh/guide/advanced/navigation-failures.md

@@ -1,5 +1,10 @@
 # 等待导航结果
 
+<VueSchoolLink
+  href="https://vueschool.io/lessons/vue-router-4-detecting-navigation-failures"
+  title="Learn how to detect navigation failures"
+/>
+
 当使用 `router-link` 组件时，Vue Router 会自动调用 `router.push` 来触发一次导航。虽然大多数链接的预期行为是将用户导航到一个新页面，但也有少数情况下用户将留在同一页面上：
 
 - 用户已经位于他们正在尝试导航到的页面