vue router 中 :to 应用对象语法传参，name 必须与路由配置完全一致，params 传动态路径参数，query 传查询参数；react router v6 用 navigate('/path/:id') 或对象跳转，url 特殊字符需手动 encodeuricomponent 编码。
Vue Router 中 router-link 的 :to 怎么传动态参数
直接用对象语法，别拼字符串。拼 path + '?id=123' 会丢失路由守卫、命名路由优势，还容易被 URL 编码搞乱。
-
:to绑定一个对象，name必须和路由配置里的name完全一致（大小写敏感） - 动态参数走
params，查询参数走query；二者不能混在同一个对象里传给命名路由（否则params会被忽略） - 如果路由定义是
path: '/user/:id'，但你用name跳转，就**必须**提供params.id，缺了会导致导航失败且无报错
<router-link :to="{ name: 'UserProfile', params: { id: userId }, query: { from: 'search' } }">
用户页
</router-link>
React Router v6 的 useNavigate 怎么带参跳转
函数式跳转时，路径模板里的参数必须用 : 占位，传参靠 params 对象注入，不是字符串插值。
- 写
navigate('/user/${id}')是错的——ES6 模板字符串不会自动解析变量，而且 v6 不支持这种写法 - 正确方式：先定义带占位符的路径（如
/user/:id），再用navigate('/user/123')或navigate({ pathname: '/user/123', search: '?tab=posts' }) - 如果用了
useParams()，那路径必须严格匹配；比如定义的是/post/:slug，却跳到/post/abc?draft=true，slug能取到，但draft得用useSearchParams()拿
参数没更新？可能是 keep-alive 或路由复用导致的
Vue 里用 <keep-alive></keep-alive> 包裹路由组件时，created/mounted 不会重复触发，但参数可能变了——组件没重渲染。
- 监听
$route变化：在watch里监听$route.params.id或$route.query - 或者用
beforeRouteUpdate导航守卫，在同一组件内参数变更时手动刷新数据 - React Router v6 没这个问题，因为每次跳转都触发新渲染；但如果你在组件里缓存了旧数据（比如把
id存在 state 里没同步更新），也会表现一样
URL 参数含斜杠或特殊字符怎么办
浏览器对 URL 路径段（params）有严格编码要求，/、?、空格等必须编码，否则路由匹配失败或被截断。
- Vue Router：用
encodeURIComponent()手动编码，服务端或后端接口也得对应解码；别依赖params自动处理 - React Router：同理，
navigate('/file/' + encodeURIComponent(filename))，否则filename = "a/b.txt"会让路由误判成/file/a/b.txt - 更稳妥的做法是改用
query传参（如?path=a%2Fb.txt），它天然支持完整 URL 编码，且不参与路由匹配逻辑
参数传递看着简单，实际卡点都在边界情况：命名路由没配对、keep-alive 下的响应缺失、URL 编码漏处理——这些地方一漏，页面就白屏或数据错乱，还很难一眼看出来。
