docs: add modifyClientRenderOpts hook documentation for Vue2, including usage examples and scenarios for customizing render options

Author: cklwblove

src/api/plugin-api.md

@@ -595,6 +595,219 @@ api.modifyBundlerChain((chain, utils) => {
 });
 ```
 
+### modifyClientRenderOpts
+
+`modifyClientRenderOpts` is a runtime plugin hook provided by WinJS for modifying render options before client-side rendering. Through this hook, when using `Vue2`, you can customize core instances such as router, store, pinia, etc., to achieve highly customized application initialization.
+
+#### Basic Usage
+
+Export the `modifyClientRenderOpts` function in `src/app.js`:
+
+```javascript
+export function modifyClientRenderOpts(memo) {
+  return {
+    ...memo,
+    // Add or modify render options here
+  };
+}
+```
+
+#### Parameters: memo Object
+
+`memo` is the passed render options object, containing the following properties:
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `routes` | `IRoutesById` | WinJS route configuration object (key-value format) |
+| `routeComponents` | `IRouteComponents` | Route component mapping table |
+| `pluginManager` | `PluginManager` | Plugin manager instance |
+| `rootElement` | `HTMLElement` | Mount root element |
+| `history` | `History` | Route history object (Vue Router 3.x is `{ base, mode }`) |
+| `basename` | `string` | Route base path |
+| `publicPath` | `string` | Public resource path |
+| `runtimePublicPath` | `boolean` | Whether to use runtime public path |
+
+#### Return Value
+
+Returns a modified render options object that must include all original properties of `memo`.
+
+#### Usage Scenarios
+
+##### Scenario 1: Pass Custom Router Instance
+
+**Use Case**: Need complete control over router instance, micro-frontend scenarios, using third-party routing libraries (Vue Router 3.x, Vue 2.x)
+
+```javascript
+import customRouter from './router/index';
+
+export function modifyClientRenderOpts(memo) {
+  return {
+    ...memo,
+    router: customRouter
+  };
+}
+```
+
+**Create custom router**:
+
+```javascript
+// src/router/index.js
+import Vue from 'vue';
+import Router from 'vue-router';
+import { routes } from './routes';
+
+// Must register plugin first
+Vue.use(Router);
+
+const router = new Router({ 
+  mode: 'hash', 
+  routes,
+  scrollBehavior(to, from, savedPosition) {
+    return savedPosition || { x: 0, y: 0 };
+  }
+});
+
+// Add global route guards
+router.beforeEach((to, from, next) => {
+  // Permission verification logic
+  next();
+});
+
+export default router;
+```
+
+##### Scenario 2: Pass Vuex Store
+
+**Use Case**: Using Vuex for state management (Vue 2.x)
+
+```javascript
+import store from './stores';
+
+export function modifyClientRenderOpts(memo) {
+  return {
+    ...memo,
+    store: store
+  };
+}
+```
+
+**Create Vuex store**:
+
+```javascript
+// src/stores/index.js
+import Vue from 'vue';
+import Vuex from 'vuex';
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+  state: {
+    user: null,
+    token: ''
+  },
+  mutations: {
+    SET_USER(state, user) {
+      state.user = user;
+    },
+    SET_TOKEN(state, token) {
+      state.token = token;
+    }
+  },
+  actions: {
+    login({ commit }, { username, password }) {
+      // Login logic
+      return api.login({ username, password }).then(res => {
+        commit('SET_USER', res.user);
+        commit('SET_TOKEN', res.token);
+      });
+    }
+  }
+});
+```
+
+##### Scenario 3: Pass Pinia
+
+**Use Case**: Using Pinia for state management (Vue 2.7+)
+
+```javascript
+import { createPinia } from 'pinia';
+
+export function modifyClientRenderOpts(memo) {
+  return {
+    ...memo,
+    pinia: createPinia()
+  };
+}
+```
+
+##### Scenario 4: Pass Multiple Instances Simultaneously
+
+**Use Case**: Need to customize both router and store
+
+```javascript
+import customRouter from './router/index';
+import store from './stores';
+
+export function modifyClientRenderOpts(memo) {
+  return {
+    ...memo,
+    router: customRouter,
+    store: store
+  };
+}
+```
+
+##### Scenario 5: Modify Other Render Options
+
+**Use Case**: Customize root element, modify base path, etc.
+
+```javascript
+export function modifyClientRenderOpts(memo) {
+  return {
+    ...memo,
+    // Customize root element
+    rootElement: document.getElementById('app'),
+    
+    // Modify base path
+    basename: '/my-app/',
+    
+    // Add custom properties
+    customOption: 'custom-value'
+  };
+}
+```
+
+#### Recommended Approach (Direct Pass)
+
+```javascript
+export function modifyClientRenderOpts(memo) {
+  return {
+    ...memo,
+    router: customRouter,
+    store: store,
+    pinia: createPinia()
+  };
+}
+```
+
+#### Compatible Approach (Via Callback)
+
+```javascript
+export function modifyClientRenderOpts(memo) {
+  const callback = () => {
+    return {
+      store: store,
+      pinia: createPinia()
+    };
+  };
+  return {
+    ...memo,
+    router: customRouter,
+    callback
+  };
+}
+```
+
 ### modifyConfig
 
 Modify configuration. Compared to user configuration, this is the final configuration passed to WinJS. The passed `fn` receives config as the first parameter and returns it. Additionally, `fn` can receive `{ paths }` as the second parameter. `paths` contains various paths of WinJS.