绝对路径从根匹配,相对路径基于父级路径拼接;绝对路径如“/settings”始终跳转至根级,相对路径如“profile”则拼接到当前路由父路径末尾,append属性可控制追加行为,router.resolve用于安全预计算路径。

Vue 嵌套路由中,绝对路径和相对路径的跳转行为差异明显,核心在于路径解析起点不同:绝对路径从根(/)开始匹配,相对路径则基于当前路由的 父级路径 拼接。搞清这点,就能避免跳转错乱、404 或白屏。
绝对路径跳转:始终以根为基准
无论当前在哪一层嵌套路由,只要 to 值以 / 开头,Vue Router 就忽略当前上下文,直接从根路径匹配整个路由。
- 例如当前在 /user/123/profile,写
<router-link to="/settings"></router-link>→ 跳到 /settings(不是/user/123/settings) - 编程式跳转同理:
this.$router.push('/posts')总是跳到根级 /posts - 适合全局导航(如顶部菜单)、脱离当前嵌套结构的跳转
相对路径跳转:依赖当前路由层级
不以 / 开头的路径,会被自动拼接到当前路由的 父路径末尾(不含动态参数部分),这是嵌套路由“相对性”的关键逻辑。
从零开始编排 SpringBoot+Vue 全栈项目工作流,适用于新建全栈项目或完整脚手架请求,触发后依次调用 product‑spec‑builder(需求调研)等模块。
- 当前在 /user/123,
<router-link to="profile"></router-link>→ 实际跳到 /user/123/profile - 当前在 /user/123/edit,
<router-link to="../profile"></router-link>→ 回退一级,跳到 /user/123/profile - 当前在 /admin/logs/detail/456,
to="export"→ 跳到 /admin/logs/detail/export(不是预期的/admin/logs/export)——这里容易出错,需注意子路由是否配置在正确层级
用 append 属性控制相对拼接行为
默认情况下,相对路径会替换当前路由的“最后一段”;加 append 后,则变成“追加”到当前完整路径后(类似文件系统中的 cd)。
立即学习“前端免费学习笔记(深入)”;
- 当前在 /user/123,
<router-link to="settings" append></router-link>→ /user/123/settings - 当前在 /user/123/login,
<router-link to="../dashboard" append></router-link>→ /user/123/dashboard(而非/user/dashboard) - 注意:
append对绝对路径无效,只影响相对路径解析
router.resolve 辅助安全计算目标路径
当路径逻辑复杂(比如动态拼接、权限判断后跳转),建议用 router.resolve() 预先算出最终路径,再执行跳转,避免运行时错误。
- 例如:
const resolved = this.$router.resolve({ name: 'UserProfile', params: { id: 123 } })→ 返回含href和location的对象 - 可用于生成外部链接、新窗口打开、或校验路径是否存在后再跳转
- 配合
append: true参数,可精确模拟 router-link 的相对行为


















