动态路由参数丢失主因是params依赖路径匹配而非导航指令，需用函数式重定向、守卫中保留fullpath、动态路由刷新后重注册，并优先用query传参。
动态路由跳转时参数丢失，核心在于params 依赖路径匹配，而非导航指令本身。它不是“传过去”的参数，而是 Vue Router 根据 URL 路径与路由配置中的 :id 段自动解析出来的结果。一旦路径没被正确解析（比如重定向写死、守卫中丢弃 fullPath、或刷新后路由未注册），$route.params 就会为空。
用函数式重定向保留 params
静态重定向写法会切断参数链：
- ❌ 错误：
{ path: '/user/:id', redirect: '/profile' }→id完全消失 - ✅ 正确：
{ path: '/user/:id', redirect: to => ({ path: '/profile', query: { userId: to.params.id } }) }
只有函数形式的 redirect 才能拿到 to 对象，从而读取原始 params。推荐统一用 query 传递，URL 显性、刷新安全、调试直观。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
避免路由守卫中清空参数
beforeEach 守卫里调用 next('/path') 或 next({ path: '/path' }) 会丢弃全部上下文：
- ❌
next({ path: '/login' })→ 原来的params和query全部清零 - ✅ 登录拦截后返回原页：
next({ path: to.fullPath })→ 完整保留跳转前地址 - ✅ 需要重定向时，显式透传：
next({ path: '/login', query: { redirect: to.fullPath } })
确认路由是否动态注册且持久化
如果用了 router.addRoute() 动态添加 /user/:id 这类路由，页面刷新后这些路由就没了——params 自然无法解析：
- 检查刷新后执行
router.getRoutes()，看目标路由是否存在 - 登录后拉取菜单时，应重新调用
addRoute补全路由表 - 不要在守卫中重复添加同名路由，避免
Duplicate named routes警告
优先用 query 替代 params 传参
除非 URL 语义强要求（如 /post/123），否则多数场景更适合用 query：
- ✅
this.$router.push({ path: '/profile', query: { id: 123 } })→ 刷新后仍可读$route.query.id - ✅ 支持任意跳转方式（
name或path），不依赖路由配置是否含:id - ⚠️ 注意：对象/数组需
JSON.stringify后传，避免[object Object]
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
