Vue Router 中$route.path与 params 的关系

1. params 参数的本质:路径的动态片段

在 Vue Router 中,params 参数是通过路由配置的动态路径片段定义的,例如:

// 路由配置

{ path: '/user/:id', component: User }

当访问/user/123时,/user/123是完整的路径,其中123是 params 参数id的值。此时:

  • $route.path/user/123包含 params 对应的路径部分)。
  • $route.params.id'123'(从路径中解析出的参数值)。
2. pathfullPath的唯一区别:是否包含 query 和 hash
  • $route.path :仅包含路径部分 (包括动态 params 的路径片段),不包含?key=value(query)和#hash
  • $route.fullPath :包含完整的 URL 字符串 (路径 + query + hash),例如/user/123?name=abc#section
相关推荐
草梅友仁31 分钟前
草梅 Auth 1.6.0 发布密码强度组件 Twilio 短信支持 | 2025 年第 36 周草梅周报
前端·开源·github
正义的大古1 小时前
OpenLayers常用控件 -- 章节七:测量工具控件教程
前端·javascript·vue.js·openlayers
Hashan1 小时前
深入理解:Webpack编译原理
前端·webpack
雲墨款哥1 小时前
一个前端开发者的救赎之路-JS基础回顾(五)-数组
前端·javascript·面试
朱程1 小时前
深入JS(一):手写 Promise
前端·javascript
Hierifer2 小时前
跨端技术:浅聊双线程原理和实现
前端
FreeBuf_2 小时前
加密货币武器化:恶意npm包利用以太坊智能合约实现隐蔽通信
前端·npm·智能合约
java水泥工3 小时前
基于Echarts+HTML5可视化数据大屏展示-图书馆大屏看板
前端·echarts·html5
EndingCoder3 小时前
Electron 性能优化:内存管理和渲染效率
javascript·性能优化·electron·前端框架
半夏陌离3 小时前
SQL 实战指南:电商订单数据分析(订单 / 用户 / 商品表关联 + 统计需求)
java·大数据·前端