vue router 是 vue 官方路由库，用于 spa 的局部更新；需配置 routes 并通过 app.use(router) 挂载；用 routerlink 导航、router-view 渲染；嵌套路由须在父组件中声明 router-view 且子路由 path 不加斜杠。
Vue Router 是 Vue 官方路由库，核心作用是让单页应用（SPA）实现 URL 变化时局部更新内容、不刷新整页。要真正用起来，关键在两件事：一是把路由规则配对好，二是让嵌套结构有清晰的渲染出口。
路由配置：从安装到挂载
先确保已安装对应版本：
- Vue 3 项目执行：npm install vue-router@4
- 在 src/router/index.ts 中创建路由实例，定义 routes 数组
- 每条规则包含 path（路径）、component（组件），可选 name（命名式导航用）和懒加载写法
component: () => import('./About.vue') - 在 main.ts 中通过
app.use(router)全局注册，使整个应用具备路由能力
一级路由：导航与渲染缺一不可
只配路由还不够，页面上得有“入口”和“出口”：
-
替代传统 a 标签，点击不刷新页面，只触发路由跳转 -
是占位容器，匹配到的组件会自动渲染在这里 - 推荐同时支持两种导航方式：路径式（
to="/home"）和命名式（:to="{ name: 'home' }"），后者更稳定，尤其路径带参数时
嵌套路由：子视图需要父子协同
当某个页面本身还要分区域切换内容（比如用户页里切换“资料”“动态”“设置”），就需要嵌套路由：
- 父路由组件模板中必须显式写一个
，作为子组件的渲染位置 - 路由配置里用 children 字段定义子路由，注意子路径是相对的（如
path: 'profile'对应完整路径/user/123/profile） - 若访问父路径（如
/user/123）时想默认显示某子页，加一条空路径子路由：{ path: '', component: UserHome } - children 是标准的路由数组，支持继续嵌套，但需逐层提供 router-view 出口
常见易错点提醒
嵌套路由出不来？大概率卡在这几个地方：
- 父组件没写
<router-view></router-view>—— 子组件无处可渲 - 子路由 path 写了开头斜杠（
/profile）—— 被当成根路径，脱离嵌套上下文 - 忘记在 main.ts 注册 router —— 整个路由系统未激活，RouterLink 和 router-view 都不生效
- 组件路径写错或未导出 default —— 控制台报错“Failed to resolve component”
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
