Vue Router 的 state 属性是 v4+ 中安全传参方式，数据存于 history.state、不暴露于 URL、刷新丢失；区别于 query/params 的可见性，state 仅当前导航有效，需 useRoute() 读取，适合传敏感或临时数据。
Vue Router 的 state 属性是官方推荐的、不暴露在 URL 中的安全传参方式，特别适合传递敏感数据（如 token、用户权限、大段对象）或避免参数被用户篡改、刷新丢失。
什么是 state？和 query/params 有什么区别？
state 是 Vue Router v4+（即 Composition API 和 createRouter 方式）中 router.push() 的一个可选属性，它会将数据存入浏览器历史记录的 state 对象中，**不会出现在 URL 上，也不会被序列化或编码**。与之对比：
-
query：拼在 URL 后（如
?id=123），可见、可书签、可被修改； -
params：需配合命名路由使用，也体现在 URL 路径中（如
/user/123），同样可见； -
state：纯内存级传递，仅当前导航生命周期内可用，刷新页面后丢失（但可通过
scrollBehavior或自定义逻辑持久化）。
如何用 state 传参？
调用 router.push() 时传入 state 对象即可：
import { useRouter } from 'vue-router'
const router = useRouter()
// 例如跳转到详情页，附带完整用户对象（不希望暴露在 URL 中）
router.push({
name: 'UserProfile',
params: { id: 'u_789' },
state: {
user: { id: 'u_789', name: '张三', role: 'admin' },
fromList: true,
timestamp: Date.now()
}
})
注意：state 只支持可序列化对象（JSON-safe），不能传函数、Promise、DOM 元素等。
立即学习“前端免费学习笔记（深入）”；
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
如何在目标组件中接收 state？
Vue Router 不会自动把 state 注入组件。你需要通过 useRoute() 获取路由实例，再读取 $route.state：
import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route.state) // { user: {...}, fromList: true, ... }
⚠️ 重要提醒：
- 刷新页面后
route.state为undefined（因为 history.state 在刷新时被重置）； - 前进/后退时，state 会被保留（这是浏览器原生行为）；
- 如果需要刷新不丢参，建议结合
pinia或 sessionStorage 做兜底存储。
state 的典型适用场景
以下情况优先考虑用 state：
- 从列表页跳转详情页，携带已拉取的完整数据（避免详情页重复请求）；
- 登录成功后跳转，传递临时 token 或用户上下文（不希望出现在地址栏）；
- 模态框内跳转子路由，需要保持父级操作状态（如“返回时回到原筛选条件”）；
- 跨路由共享一次性的中间状态（如表单草稿、暂存的筛选配置）。
不复杂但容易忽略——用对地方，state 就是最轻量又安全的“隐形信使”。
