docs(README): 更新中文和英文文档

- 重新组织文档结构，增加核心功能介绍
- 添加动态路由缓存和嵌套路由渲染的详细说明
- 更新示例代码和API文档
- 增加升级指南和赞助信息

Author: l246804

.github/workflows/deployPlay.yaml

@@ -11,7 +11,7 @@ permissions:
   contents: write
 
 concurrency:
-  group: 'pages'
+  group: pages
   cancel-in-progress: true
 
 jobs:

.vscode/extensions.json

@@ -1,7 +1,3 @@
 {
-  "recommendations": [
-    "Vue.volar",
-    "dbaeumer.vscode-eslint",
-    "esbenp.prettier-vscode",
-  ]
+  "recommendations": ["Vue.volar", "dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
 }

.vscode/settings.json

@@ -121,5 +121,5 @@
     "jsonc",
     "yaml",
     "toml"
-  ],
+  ]
 }

README.md

@@ -1,23 +1,38 @@
 # vue-router-better-view
 
-Enhances the [RouterView & KeepAlive](https://router.vuejs.org/guide/advanced/router-view-slot.html#KeepAlive-Transition) functionality of [Vue Router](https://router.vuejs.org/).
+An extension for [Vue Router](https://router.vuejs.org/)'s [RouterView](https://router.vuejs.org/guide/advanced/router-view-slot.html#RouterView-slot) with enhanced features.
 
-[中文文档](https://github.com/l246804/vue-router-better-view/blob/dev/README.zh-CN.md)
+**Key Features**
 
-[Online example](https://l246804.github.io/vue-router-better-view/)
+- [x] Enhanced [RouterView & KeepAlive](https://router.vuejs.org/guide/advanced/router-view-slot.html#KeepAlive-Transition) functionality with support for dynamic parameter route caching
+- [x] Precise rendering (ignore parent routes with components) for intuitive nested route handling
+
+[中文文档](./README.zh-CN.md) | [Online Demo](https://l246804.github.io/vue-router-better-view/)
+
+---
 
 ## Background
 
-The current [RouterView](file:///home/leihaohao/workspaces/own/vue-router-better-view/node_modules/.pnpm/[email protected][email protected][email protected]_/node_modules/vue-router/dist/vue-router.d.ts#L1603-L1613) component in Vue Router has the following limitations when used with the [KeepAlive](https://cn.vuejs.org/api/built-in-components.html#keepalive) component:
+Current issues with Vue Router:
+
+### 1. **Dynamic Route Caching Problems**
+
+- **Issue 1**: When using `KeepAlive`, cannot precisely control component instance caching for dynamic routes (e.g., `/user/:id`)
+- **Issue 2**: Route component `name` must match route configuration's `name` attribute for proper caching
 
-1. Unable to cache different parameters of the same component instance based on [dynamic route matching](https://router.vuejs.org/guide/essentials/dynamic-matching.html).
-2. Route components must have distinct [name](file:///home/leihaohao/workspaces/own/vue-router-better-view/node_modules/.pnpm/[email protected][email protected][email protected]_/node_modules/vue-router/dist/vue-router.d.ts#L244-L244) attributes; otherwise, components with the same name will cause caching issues.
+### 2. **Nested Route Rendering Issues**
 
-This plugin provides a simple and efficient solution to the above problems.
+- **Issue 1**: Official nested routes require either nested `RouterView` or flat route registration, leading to:
+  - **Nested RouterView approach**: Redundant rendering logic in sub-pages
+  - **Flat registration**: Loses `route.matched` convenience and feels unintuitive
+
+This plugin solves these issues through the `BetterRouterView` component with a more efficient solution.
+
+---
 
 ## Installation
 
-```sh
+```bash
 npm i vue-router-better-view
 ```
 
@@ -26,7 +41,7 @@ npm i vue-router-better-view
 ```ts
 import { BetterRouterView } from 'vue-router-better-view'
 
-// Globally register the BetterRouterView component
+// Globally register BetterRouterView component
 app.use(BetterRouterView)
 ```
 
@@ -48,21 +63,19 @@ app.use(BetterRouterView)
 </template>
 ```
 
-## Component Props
+---
 
-```ts
-export interface BetterRouterViewProps extends RouterViewProps {
-  /**
-   * Retrieves the view component key for the current route.
-   * If not set or returns a falsy value, behaves like the standard `RouterView` component.
-   * @param route The current route
-   * @returns The view component key
-   */
-  resolveViewKey?: ResolveViewKey
-}
-```
+## Core Features
+
+### 1. **Dynamic Route Caching Optimization**
+
+#### Problem
+
+By default, `/user/1` and `/user/2` are treated as same component, preventing fine-grained caching control.
 
-## Example
+#### Solution
+
+Custom cache identifier via `resolveViewKey`:
 
 ```html
 <script
@@ -72,12 +85,9 @@ export interface BetterRouterViewProps extends RouterViewProps {
   import { BetterRouterView, type ResolveViewKey } from 'vue-router-better-view'
 
   const resolveViewKey: ResolveViewKey = (route) => {
-    // If route.meta.singleton is true, use the route's path as the view component key
-    if (route.meta.singleton) {
-      return route.path
-    }
-
-    // Use the route's fullPath as the view component key
+    // Cache by path if marked as singleton
+    if (route.meta.singleton) return route.path
+    // Cache by fullPath (including params) otherwise
     return route.fullPath
   }
 </script>
@@ -88,7 +98,7 @@ export interface BetterRouterViewProps extends RouterViewProps {
       v-slot="{ Component }"
       :resolve-view-key="resolveViewKey"
     >
-      <!-- include/exclude can be used based on the return value of resolveViewKey -->
+      <!-- Include/exclude based on resolveViewKey value -->
       <keep-alive>
         <component :is="Component" />
       </keep-alive>
@@ -97,22 +107,121 @@ export interface BetterRouterViewProps extends RouterViewProps {
 </template>
 ```
 
-### Template Refs
+---
+
+### 2. **Precise Nested Route Rendering**
+
+#### Use Case
+
+Directly render `<UserDetail />` for `/system/user/detail` instead of parent component `<User />`
+
+#### Configuration Example
+
+```ts
+// src/router/index.ts
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/system',
+    component: Layout, // Layout component requiring precise rendering
+    children: [
+      {
+        path: 'user',
+        component: UserLayout,
+        children: [
+          {
+            path: 'detail/:id?',
+            component: UserDetail,
+          },
+        ],
+      },
+    ],
+  },
+]
+```
+
+#### Implementation Methods
+
+- **Using `<BetterRouterView />`**:
+
+  ```html
+  <script
+    setup
+    lang="ts"
+  >
+    import { BetterRouterView } from 'vue-router-better-view'
+  </script>
+
+  <template>
+    <main>
+      <!-- Enable precise rendering with 'exact' attribute -->
+      <better-router-view exact />
+    </main>
+  </template>
+  ```
+
+- **Using `useExactView` Function**:
 
-```diff
-<script setup lang="ts">
-+import { ref } from 'vue'
+> Must be called in the component containing `<RouterView />`
 
-+const mainContent = ref<any>()
-+const resolveMainContent = () => {
-+  // Prefer using the inner property to get the reference of the original component;
-+  // if it doesn't exist, fall back to mainContent.value.
-+  return mainContent.value?.inner || mainContent.value
-+}
+```html
+<script
+  setup
+  lang="ts"
+>
+  import { useExactView } from 'vue-router-better-view'
+
+  useExactView({ exact: true })
 </script>
 
 <template>
--        <component :is="Component" />
-+        <component :is="Component" ref="mainContent" />
+  <main>
+    <!-- Can use native RouterView component -->
+    <router-view />
+  </main>
 </template>
 ```
+
+---
+
+## API
+
+### BetterRouterView
+
+```ts
+interface BetterRouterViewProps extends RouterViewProps {
+  /**
+   * Gets view component identifier for current route
+   * - When unset or returns falsy value, behaves like standard RouterView
+   * @param route Current route
+   * @returns View component identifier
+   */
+  resolveViewKey?: ResolveViewKey
+  /**
+   * Whether to enable precise route matching
+   * - boolean: `true` enables precise matching but disallows nested RouterView
+   * - number: Enables precise matching with nested RouterView support
+   * - null: Default, restores standard RouterView behavior
+   * @default null
+   */
+  exact?: boolean | number | null
+}
+```
+
+---
+
+## Migration Guide
+
+### Upgrading to v1.0.0
+
+- Fully compatible with standard `<RouterView>` usage
+- Ensure `exact` attribute is enabled in nested route configurations
+
+---
+
+## Sponsor
+
+Your support fuels continuous improvement! If this project helps you, consider buying me a juice 🍹:
+
+| WeChat                                  | Alipay                                   |
+| --------------------------------------- | ---------------------------------------- |
+| <img src="./public/wx.jpg" width="200"> | <img src="./public/zfb.jpg" width="200"> |