vue-router 原理和常用方法

vue-router 负责把浏览器的地址翻译成「该显示哪个组件」，是 Vue 单页应用（SPA）里前端路由的事实标准。面试时抓住一条主线就能应付大部分问题：**读取地址 → 匹配路由表 → 执行导航守卫 → 更新响应式的当前路由 → 渲染组件**。其中「地址写在哪里」决定了 hash 和 history 两种模式的差异，「守卫按什么顺序执行」决定了鉴权、数据获取这类逻辑该放在哪。

> 你可以把 vue-router 想象成前台接待：来一个地址（访客），先翻一遍登记表（路由表）看看该带去哪个房间（组件），进门之前还要过几道安检（导航守卫），最后才领人进去并更新门牌号（`currentRoute`）。 ## 目录 - [一、先建立整体认识：vue-router 在做什么](#一先建立整体认识vue-router-在做什么) - [二、hash 和 history 的区别和原理](#二hash-和-history-的区别和原理) - [三、vue-router 有哪些跳转方式](#三vue-router-有哪些跳转方式) - [四、vue-router 有哪些路由守卫](#四vue-router-有哪些路由守卫) - [五、除了 push、replace，还有哪些操作方法](#五除了-pushreplace还有哪些操作方法) - [六、总结](#六总结) ## 一、先建立整体认识：vue-router 在做什么 多页应用里，跳转靠「请求一个新页面」：点一个链接，浏览器向服务器要一个新的 HTML 文档，整页刷新。单页应用（SPA）只有一个入口 HTML，跳转时**不重新请求页面**，而是由前端脚本拦截地址变化，自己决定把哪个组件渲染到 `<router-view>` 里。vue-router 就是干这件事的。 它最核心的一次导航，无论哪种模式，都遵循同一条链路： 1. 拿到当前地址（`/users` 或 `#/users`）。 2. 拿地址去匹配路由表 `routes`，得到目标路由记录。 3. 执行一系列导航守卫（鉴权、数据获取、离开确认）。 4. 守卫放行后，把匹配结果写进响应式的 `currentRoute`。 5. `<router-view>` 观察到 `currentRoute` 变化，把对应的组件渲染出来。 理解了这条主线，剩下的「hash 和 history 的区别」「有哪些跳转方式」「有哪些守卫」「还有哪些操作方法」，都是在给这条主线的某个环节做补充。下面逐块拆开。 ## 二、hash 和 history 的区别和原理 这是面试最常问的一块。先记住一句话结论：**hash 把路由放在 `#` 后面的片段里，history 把路由放进真实路径里**。它们最终做的都是「读地址 → 匹配组件」，区别只在于「地址写在哪」和「浏览器通过哪个事件通知路由器」。 ### 1. URL 到底长什么样 以 `https://example.com/app/` 这个站点为例： - hash 模式：`https://example.com/app/#/users?id=1` - history 模式：`https://example.com/app/users?id=1` 关键差异在于 `#`。`#` 后面那一段叫**片段标识符（fragment）**，它有个特殊性质：**不会随 HTTP 请求发给服务器**。 - `#/users?id=1` 里的内容只有浏览器里的脚本能读到，服务器只收到 `https://example.com/app/`。 - history 模式的 `/users?id=1` 是真实路径，刷新或直接访问时浏览器会真的向服务器请求 `/users`。 所以 hash 不是「服务器也能识别的路由」，它是浏览器专门留给前端脚本处理的一块地址。这条性质直接决定了后面「history 刷新 404」这个经典问题。 ### 2. hash 模式：靠 hashchange 驱动 hash 模式的核心是监听浏览器的 `hashchange` 事件。地址里 `#` 后面的内容变了，浏览器就会触发一次 `hashchange`，路由器收到后重新匹配并渲染。 ```javascript // 一个最小的 hash 路由器：读懂它，就懂了 hash 模式的骨架 function createHashRouter(render) { // 读地址只取 # 后面的部分；没有 hash 时把首页当作 / const readPath = () => location.hash.slice(1) || '/'; // hashchange 覆盖两种场景：用户点前进/后退，以及代码直接改 location.hash window.addEventListener('hashchange', () => render(readPath())); return { push(path) { // 赋值会产生一条新的历史记录，随后由 hashchange 触发渲染 location.hash = path; }, replace(path) { // replace 不新增历史记录，用户按后退不会回到被替换的地址 location.replace(`#${path}`); }, start() { // 首次加载不会因为"初始 hash"再触发 hashchange，所以要主动渲染一次 render(readPath()); } }; } // 使用：render 负责把路径"翻译"成要显示的组件 const router = createHashRouter((path) => { console.log('当前渲染：', path); }); router.start(); // 首次加载，主动渲染当前地址 router.push('/users'); // 触发 hashchange，渲染 /users ``` #### 拆解：为什么这些判断不能删 - **`readPath` 的 `|| '/'` 不能删**：直接打开 `https://example.com/app/` 时 `location.hash` 是空字符串，`slice(1)` 得到 `''`，如果不兜底成 `/`，首页就没有对应的路径可以匹配。 - **`hashchange` 监听不能删**：删掉后，用户点浏览器的前进/后退按钮地址栏会变，但组件不会重新匹配，页面就「卡」在旧组件上。 - **`start()` 不能删**：直接打开带 hash 的深层链接 `https://example.com/app/#/users` 时，页面加载过程本身不会触发 `hashchange`，没有 `start()` 页面会停留在错误的初始组件。 `push` 和 `replace` 的区别也在这里体现：`location.hash = path` 会往历史栈里**新增**一条记录，`location.replace()` 是**替换**当前这条记录，不会多出一条历史，用户后退也回不去。 ### 3. history 模式：靠 pushState + popstate 驱动 history 模式用浏览器的 History API 操作真实路径。它比 hash 多一个「坑」：`pushState`/`replaceState` **不会自动触发任何事件**，所以路由器改完地址后必须自己更新视图。 ```javascript // 一个最小的 history 路由器：注意"手动更新"和"回退监听"两个关键点 function createHistoryRouter(render) { // pathname 和 search 才是 history 模式的前端路由地址 const readPath = () => location.pathname + location.search; // popstate 只在用户点前进/后退时触发，路由器要在这里重新匹配 window.addEventListener('popstate', () => render(readPath())); return { push(path) { // pushState 只改地址和历史栈，不发事件，所以这里必须主动 render history.pushState({ path }, '', path); render(readPath()); }, replace(path) { // replaceState 覆盖当前历史条目，同样不会自动触发 popstate history.replaceState({ path }, '', path); render(readPath()); }, start() { // 刷新后脚本重新执行，入口文件加载完成后要匹配当前真实路径 render(readPath()); } }; } ``` #### 拆解：history 模式的两个「必须手动」 - **`render(readPath())` 不能删**：删掉后复现一个经典 bug——地址栏已经变成 `/users`，视图却还是首页。因为 `pushState` 不会触发 `popstate`，不手动渲染就没人去更新视图。 - **`popstate` 监听不能删**：删掉后，前进/后退按钮只会改变 URL，不会切换组件。`popstate` 是浏览器在历史遍历（前进/后退）时发的通知，路由器靠它才知道「用户回退到上一页了」。 这两个「必须手动」都不是 Vue 特有行为，而是浏览器 History API 的固有规则：`pushState`/`replaceState` 只操作地址和栈，不派发事件；只有历史遍历（前进/后退）才会触发 `popstate`。 ### 4. 一张表看核心区别 | 对比项 | hash 模式 | history 模式 | | --- | --- | --- | | 地址形式 | `/#/users` | `/users` | | 服务器能否看到路由 | 不能，`#` 后是片段不进请求 | 能，刷新会请求真实路径 | | 驱动事件 | 传统实现监听 `hashchange` | `pushState`/`replaceState` 改地址，`popstate` 处理回退 | | 刷新深层链接 | 服务器只收到 `/`，一般不会 404 | 服务器收到 `/users`，需配置回退，否则 404 | | 部署要求 | 低，静态服务器即可 | 高，需配置 SPA 回退 | > 关于版本：Vue Router 3 的 hash 实现主要监听 `hashchange`；Vue Router 4 的 `createWebHashHistory` 底层可以复用 `pushState`/`popstate` 这套历史管理逻辑。面试回答时抓住「片段不进 HTTP 请求、前端根据地址重新匹配」这个不变的原理，不要把某一个事件名当成唯一实现。 ### 5. 踩坑：history 刷新为什么会 404 这是 history 模式最常踩的坑。假设你把应用部署好了，用户在地址栏直接访问 `https://example.com/users`： 1. 这个请求**先到服务器**，而不是先到 vue-router。 2. 服务器只配置了 `/` 会返回 `index.html`，没配置 `/users`，于是返回 404。 3. vue-router 根本没机会启动，页面就挂了。 根因是：history 模式的地址是「真实请求路径」，刷新时浏览器会真的去请求它。修复方式是让服务器把所有「不认识的前端路径」都回退到入口 `index.html`，应用启动后再由 vue-router 完成第一次匹配。以 Nginx 为例： ```nginx location / { try_files $uri $uri/ /index.html; } ``` 这条配置的意思是：先找磁盘上的真实文件 `$uri`，找不到再找目录 `$uri/`，都没有就回退到 `/index.html`。**API 接口路径要单独转发**，不能把 `/api/xxx` 也错误地回退成 HTML 页面。 而 hash 模式因为 `#` 后面的内容根本不进请求，直接访问 `https://example.com/#/users` 时服务器只收到 `/`，返回 `index.html`，入口脚本加载后由 `start()` 读取 hash 并匹配 `/users`，所以通常不会有服务器 404。 ## 三、vue-router 有哪些跳转方式 vue-router 的跳转分两大类：**声明式导航**（写在模板里的 `<router-link>`）和**编程式导航**（写在 JS 里的 `router.xxx`）。面试时先报这两类，再展开具体方法。 ### 1. 声明式导航：router-link `<router-link>` 会渲染成一个 `<a>` 标签，点击时触发路由跳转，但不会整页刷新： ```html <template> <nav> <!-- to 可以是字符串路径 --> <router-link to="/home">首页</router-link> <!-- to 也可以是带参数的对象 --> <router-link :to="{ name: 'user', params: { id: 1 } }">用户 1</router-link> <!-- replace 属性等价于编程式的 replace，替换当前历史而非新增 --> <router-link to="/about" replace>关于</router-link> </nav> </template> ``` 它比普通的 `<a href="/home">` 更适合 SPA，原因是：`<router-link>` 会复用路由器的状态，在 history 模式下调用 `pushState`（在 hash 模式下更新片段），**避免整页刷新**，同时保留 `<a>` 标签的可访问性语义（支持键盘、右键新标签页等）。 ### 2. 编程式导航：router.push 和 router.replace `router.push` 是跳转的主力，会向历史栈**新增**一条记录： ```javascript // 字符串路径 router.push('/home'); // 带查询参数：跳转到 /home?plan=private router.push({ path: '/home', query: { plan: 'private' } }); // 命名路由 + 动态参数：跳转到 /users/1 router.push({ name: 'user', params: { id: 1 } }); ``` `router.replace` 用法和 `push` 几乎一样，唯一区别是它**替换**当前历史记录，不新增。用户点后退时不会回到被替换的那一页： ```javascript router.replace('/login'); // 登录成功后常用 replace，避免后退又回到登录页 ``` > 一个容易踩的点：`path` 和 `params` 不能同时使用。`router.push({ path: '/user', params: { id: 1 } })` 里的 `params` 会被忽略，想传 `params` 就得用命名路由 `name`。 ### 3. 前进后退：router.go / back / forward 这三个方法本质上在操作历史栈，相当于浏览器的前进/后退按钮： ```javascript router.go(1); // 前进一条，等价于 router.forward() router.go(-1); // 后退一条，等价于 router.back() router.go(3); // 前进三条 router.go(0); // 刷新当前页 ``` `router.back()` 和 `router.forward()` 就是 `router.go(-1)` 和 `router.go(1)` 的语法糖，没有别的新能力。 ### 4. 一句话总结跳转方式 | 方式 | 类型 | 行为 | 典型场景 | | --- | --- | --- | --- | | `<router-link :to>` | 声明式 | 新增一条历史 | 导航菜单、列表项跳转 | | `router.push` | 编程式 | 新增一条历史 | 事件回调里跳转 | | `router.replace` | 编程式 | 替换当前历史 | 登录成功后跳转、重定向 | | `router.go(n)` | 编程式 | 前进/后退 n 条 | 自定义前进后退按钮 | | `router.back` / `forward` | 编程式 | 后退/前进一条 | `go` 的语义化写法 | ## 四、vue-router 有哪些路由守卫 路由守卫（Navigation Guard）是「进入目标路由之前」的一道道关卡，用来做登录校验、权限判断、离开确认、数据预取等。它分三类：**全局守卫**、**路由独享守卫**、**组件内守卫**。面试时能把三类和它们的执行顺序说清楚，就是满分回答。 ### 1. 全局守卫：beforeEach / beforeResolve / afterEach 全局守卫定义在 `router` 实例上，对所有导航生效： ```javascript const router = createRouter({ history: createWebHistory(), routes }); // beforeEach：最常用的守卫，在导航真正开始前执行，适合做登录校验 router.beforeEach((to, from) => { const loggedIn = Boolean(getToken()); if (to.meta.requiresAuth && !loggedIn) { // 返回一个路由对象 = 重定向到登录页 return { path: '/login', query: { redirect: to.fullPath } }; } // 返回 true 或 undefined = 放行 return true; }); // beforeResolve：在所有组件内守卫和异步组件解析完成后、导航被确认前执行 // 适合做「必须等组件内逻辑先完成」的全局兜底校验 router.beforeResolve(async (to) => { // 这里可以拿到组件已就绪后的状态再做最后判断 }); // afterEach：导航已确认后执行，不能取消导航，适合做埋点、改页面标题 router.afterEach((to) => { document.title = to.meta.title ?? '默认标题'; }); ``` 三个全局守卫的分工： - `beforeEach`：最早执行，权限、鉴权的首选位置。 - `beforeResolve`：晚于所有组件内守卫，适合做「全局的、但要在组件逻辑之后」的校验（Vue Router 4.3+ 支持）。 - `afterEach`：导航已经发生，无法再拦截，只做善后（埋点、标题、滚动）。 ### 2. 路由独享守卫：beforeEnter `beforeEnter` 写在某一条路由配置里，只对进入这条路由生效： ```javascript const routes = [ { path: '/admin', component: Admin, // 只拦截进入 /admin 的导航，其他路由不受影响 beforeEnter: (to, from) => { if (!isAdmin()) return { path: '/403' }; return true; } } ]; ``` 它适合「只有个别页面需要特殊校验」的场景，避免把逻辑堆在全局 `beforeEach` 里做一堆 `if (to.path === '/admin')` 判断。 ### 3. 组件内守卫：beforeRouteEnter / beforeRouteUpdate / beforeRouteLeave 组件内守卫写在组件里（Options API 是组件的同名选项，组合式 API 提供 `onBeforeRouteLeave` / `onBeforeRouteUpdate` 两个组合函数），对「这个组件」参与导航时生效： ```javascript // Options API 写法 export default { beforeRouteEnter(to, from, next) { // 此时组件实例还没创建，拿不到 this // 想拿实例，只能通过 next 的回调 next((vm) => { // 导航确认、组件挂载后，这里才能访问到 vm vm.fetchUser(to.params.id); }); }, beforeRouteUpdate(to, from) { // 路由变化但组件被复用时触发，例如 /users/1 → /users/2 // 此时 this 可用 this.fetchUser(to.params.id); }, beforeRouteLeave(to, from) { // 离开前触发，常用于「未保存修改」的确认 const answer = window.confirm('还有未保存的修改，确定离开吗？'); if (!answer) return false; } }; ``` 三个组件内守卫的分工： - `beforeRouteEnter`：**进入组件前**执行，此时组件还没创建，拿不到 `this`。想访问实例只能通过传给 `next` 的回调：`next(vm => { ... })`，这个回调会在导航确认、组件挂载后才执行（它也是唯一支持向 `next` 传回调的守卫）。 - `beforeRouteUpdate`：**路由变化但组件被复用**时执行，例如从 `/users/1` 跳到 `/users/2`，同一个 `User` 组件没销毁，Vue 不会重新创建它，需要靠这个守卫来响应参数变化。 - `beforeRouteLeave`：**离开组件前**执行，适合做「表单未保存」的离开拦截，返回 `false` 就能阻止离开。 ### 4. 完整导航解析流程：这些守卫按什么顺序跑 这是面试的高频追问。Vue Router 4 的一次导航，守卫的执行顺序是固定的： 1. 导航触发。 2. 在**失活的组件**里调用 `beforeRouteLeave`。 3. 调用全局 `beforeEach`。 4. 在**复用的组件**里调用 `beforeRouteUpdate`（如果有）。 5. 在路由配置里调用 `beforeEnter`。 6. 解析异步路由组件（懒加载的组件此时才去下载）。 7. 在**被激活的组件**里调用 `beforeRouteEnter`。 8. 调用全局 `beforeResolve`。 9. 导航被确认。 10. 调用全局 `afterEach`。 11. 触发 DOM 更新。 12. 调用 `beforeRouteEnter` 中传给 `next` 的回调函数，此时实例已可用。 记住这个顺序有个好处：**离页面越近的守卫越靠内层**。离开时先从「旧页面自己」开始（`beforeRouteLeave`），进入时最后才轮到「新页面自己」（`beforeRouteEnter`）。鉴权要趁早放全局 `beforeEach`，操作组件实例的数据要放到 `beforeRouteEnter` 的 `next` 回调里。 ### 5. 守卫的返回值：return 和 next 的区别 Vue Router 4 推荐用**返回值**控制守卫，`next` 是老写法（Vue Router 3 的遗留），仍然能用但不推荐混用： | 守卫返回 | 含义 | | --- | --- | | `true` 或 `undefined`（不返回） | 放行，继续后续流程 | | `false` | 取消当前导航，停留原处（浏览器地址会被重置） | | 一个路由地址（字符串或对象） | 重定向到该地址，等价于 `return router.push(...)` | | 抛出一个错误 | 中止导航，交给 `router.onError()` 处理 | 最常踩的坑是**守卫循环**：如果守卫里无条件重定向到当前地址，比如登录页也满足 `to.meta.requiresAuth && !loggedIn`，那每次进登录页都会被踢回登录页，形成死循环。修复方式是先判断目标是否已经是登录页，并保证每次导航只有一个明确结果（不要 `next()` 之后又 `return false`）。 ```javascript router.beforeEach((to) => { const loggedIn = Boolean(getToken()); if (to.meta.requiresAuth && !loggedIn) { // 关键：先排除目标已经是登录页的情况，避免死循环 if (to.name !== 'login') { return { name: 'login', query: { redirect: to.fullPath } }; } } return true; }); ``` ## 五、除了 push、replace，还有哪些操作方法 `push`/`replace`/`go` 之外，vue-router 还提供了一批「不直接跳转、但用来管理路由表或观察状态」的方法，面试问到「还有哪些操作方法」时，重点答**动态路由**和**查询/监听类**方法。 ### 1. 动态路由：addRoute / removeRoute / hasRoute / getRoutes 路由表不一定非要在 `createRouter` 里一次性写死。权限系统最常见的做法是：登录后根据后端返回的权限菜单，**动态把路由加进去**。 ```javascript // 新增一条顶级路由 router.addRoute({ path: '/report', name: 'report', component: Report }); // 给已有命名路由追加子路由（第一个参数是父路由的 name） router.addRoute('admin', { path: 'users', // 相对路径，实际地址是 /admin/users name: 'admin-users', component: AdminUsers }); // 按 name 删除一条路由 router.removeRoute('report'); // 判断某条路由是否存在 router.hasRoute('report'); // false // 拿到当前完整的路由表（包括动态添加的） const routes = router.getRoutes(); ``` 这几个方法的典型应用： - `addRoute`：登录后按权限动态挂载菜单；也可以配合 `addRoute('parent', route)` 追加嵌套子路由。 - `removeRoute`：退出登录或权限变化时，把之前动态加的路由摘掉，避免残留。 - `hasRoute` / `getRoutes`：判断路由是否已存在（防止重复添加），或调试时查看当前路由表。 > 动态路由有个边界要注意：**刷新后内存里的动态路由会丢**。因为刷新会重新执行入口脚本，`addRoute` 加的记录不存在了。所以常见做法是在入口 `main.js` 里先检查 token，有 token 就重新拉权限并 `addRoute`，再 `router.isReady()` 之后才真正进入应用。 ### 2. 查询类方法：resolve / currentRoute `router.resolve` 和 `router.currentRoute` 是「只读」性质的方法，不触发跳转： ```javascript // resolve：把地址解析成"标准路由位置"，但不跳转 // 常用于拿到完整路径、href，或提前校验某个地址能否匹配 const target = router.resolve({ name: 'user', params: { id: 1 } }); console.log(target.href); // /users/1 console.log(target.fullPath); // /users/1 // currentRoute：响应式的"当前路由"对象 // 它是路由器的核心状态，<router-view> 就是靠观察它来切换组件的 console.log(router.currentRoute.value.path); // 当前路径 ``` `currentRoute` 是响应式的（在组合式 API 里常通过 `useRoute()` 拿到它），这是 vue-router「更新视图」的底层关键：导航确认后写进 `currentRoute`，`<router-view>` 观察变化后渲染对应组件。 ### 3. 生命周期与错误处理：isReady / onError ```javascript // isReady：路由器是否已完成"初始导航" // 动态路由场景下，等 addRoute 完成后再挂载应用，避免首屏闪白 router.isReady().then(() => { app.mount('#app'); }); // onError：注册一个全局错误处理，捕获导航过程中的异常 router.onError((error, to, from) => { // 比如懒加载组件下载失败、守卫里抛出的错误都会走到这里 if (error.message.includes('Failed to fetch')) { console.error('组件加载失败，请检查网络'); } }); ``` `onError` 返回一个「移除该监听」的函数，可以这样用： ```javascript const removeListener = router.onError(handler); // 需要时移除监听 removeListener(); ``` ### 4. 组合式 API：useRouter / useRoute Vue 3 的组合式写法里，组件内通过两个工具函数拿路由器实例和当前路由： ```javascript import { useRouter, useRoute } from 'vue-router'; // useRouter：拿到 router 实例，用来调用 push / replace / addRoute 等方法 const router = useRouter(); const route = useRoute(); // 响应式的当前路由对象 function goToUser(id) { router.push({ name: 'user', params: { id } }); } // route 是响应式的，可以直接在 computed / watch 里用 const userId = computed(() => route.params.id); ``` > 注意 `useRoute` 返回的 `route` 是响应式的，但要拿它当前的值得访问 `.value` 里的字段（在 `setup`/`<script setup>` 里 `route` 本身是 reactive 对象，直接 `route.params.id` 即可）。不要把它解构成普通变量，那样会丢失响应式。 ### 5. 一张表汇总「跳转之外」的操作方法 | 方法 | 作用 | 是否触发跳转 | | --- | --- | --- | | `addRoute(name?, route)` | 动态添加路由 | 否 | | `removeRoute(name)` | 按 name 删除路由 | 否 | | `hasRoute(name)` | 判断路由是否存在 | 否 | | `getRoutes()` | 获取完整路由表 | 否 | | `resolve(location)` | 解析地址为路由位置 | 否 | | `currentRoute` | 响应式的当前路由 | 否 | | `isReady()` | 是否完成初始导航 | 否 | | `onError(handler)` | 注册错误监听 | 否 | | `beforeEach` / `beforeResolve` / `afterEach` | 注册全局守卫 | 否 | ## 六、总结 - vue-router 的核心是一条链路：**读地址 → 匹配路由 → 执行守卫 → 更新 `currentRoute` → 渲染组件**。 - **hash 模式**把路由放 `#` 后，片段不进 HTTP 请求，靠 `hashchange`（或复用历史管理）驱动，部署简单。 - **history 模式**把路由放真实路径，靠 `pushState`/`replaceState` 改地址、`popstate` 处理回退，刷新需要服务器回退到 `index.html`，否则 404。 - **跳转方式**分声明式（`<router-link>`）和编程式（`push` 新增历史、`replace` 替换历史、`go`/`back`/`forward` 操作历史栈）。 - **路由守卫**分全局（`beforeEach`/`beforeResolve`/`afterEach`）、路由独享（`beforeEnter`）、组件内（`beforeRouteEnter`/`beforeRouteUpdate`/`beforeRouteLeave`），执行顺序固定：先离开旧页，再全局，最后进新页。 - **其他操作方法**重点是动态路由（`addRoute`/`removeRoute`/`hasRoute`/`getRoutes`），还有 `resolve`/`currentRoute`/`isReady`/`onError` 和组合式 API 的 `useRouter`/`useRoute`。 完整可运行的 mini 路由器和守卫顺序演示见 [examples/vueRouter.html](../examples/vueRouter.html)，用浏览器打开即可查看 hash 模式的跳转与守卫执行顺序。案例只做静态编写，未在本地执行。