Vue Router 路由
Vue Router 是官方路由库：URL 与组件一一对应，路径变化时切换渲染的组件而不整页刷新（SPA）。核心三步：定义路由表（path ↔ component）、创建 router 实例、以 <router-view> 作为出口、<router-link> 做导航。
动态路由用 :参数 匹配（/user/:id），组件内 useRoute() 取参数。嵌套路由用 children 配置 + 子级 router-view。导航用 router.push("/about") 或 router.back()。
- 路由表 routes：[{ path, component }]，router-view 是出口
- router-link to="/x" 渲染为 a 标签，切换不整页刷新
- 动态路由 :id + useRoute().params；嵌套用 children
HTML
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Vue Router 路由</title> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <script src="https://unpkg.com/vue-router@4/dist/vue-router.global.js"></script> </head> <body> <div id="app"> <router-link to="/">首页</router-link> <router-link to="/user/42">用户42</router-link> <!-- 路由出口：匹配的组件渲染在这里 --> <router-view></router-view> </div> <script> const { createApp, h } = Vue; const { createRouter, createWebHistory, useRoute } = VueRouter; // 简单组件：render 函数写法（无 SFC 时的选择） const Home = { render: () => h('h2', '首页内容') }; const User = { setup() { const route = useRoute(); return () => h('h2', '用户 ID：' + route.params.id); } }; const router = createRouter({ history: createWebHistory(), routes: [ { path: '/', component: Home }, { path: '/user/:id', component: User } ] }); createApp({}).use(router).mount('#app'); </script> </body> </html>
本节要点路由三要素：routes 路由表 + router-view 出口 + router-link 导航；:id 动态参数用 useRoute 取。
