Vue Router 中获取路由参数需区分 params 和 query：params 来自动态路径（如 /user/:id），须在路由配置中定义占位符，读取时需防 undefined；query 来自 URL 查询字符串（如 ?id=123），无需预配置，可直接安全访问。

Vue Router 中获取当前路由参数，核心是通过 this.$route 对象读取其 params 和 query 两个属性。它们对应两类不同来源的参数，用法和配置要求完全不同，不能混用。

区分两种参数类型：params vs query

params 来自动态路径（如 /user/:id），必须在路由配置中明确定义占位符；query 来自 URL 查询字符串（如 ?name=Tom&age=25），无需提前配置，直接拼接即可。

• /user/123 → this.$route.params.id === '123'
• /user?id=123&tab=profile → this.$route.query.id === '123'

在组件中安全读取 params 参数

动态参数只在匹配成功时存在，直接访问 this.$route.params.xxx 可能为 undefined。推荐结合路由守卫或响应式监听处理变化：

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

• 首次进入时，在 created 或 mounted 钩子中取值
• 路由复用时（如从 /user/1 → /user/2），需监听 $route 变化：
  watch: { '$route': 'fetchData' }
• 使用 props: true 开启自动 props 注入，让组件接收 params 更简洁

query 参数可以直接、随时读取

查询参数始终可用，结构稳定，适合传递可选、非关键信息：

• this.$route.query.search、this.$route.query.page 等可直接访问
• 刷新页面后仍保留，适合分页、筛选、搜索关键词等场景
• 跳转时可通过对象写法传参：this.$router.push({ path: '/list', query: { q: 'vue' } })

注意 Route 对象是不可变的

每次导航都会生成一个全新的 $route 对象，旧对象不会被修改。这意味着：

• 可以放心缓存或深比较两个 $route 对象是否相同
• 不能试图给 this.$route.params 赋值或添加属性（已被 Object.freeze 冻结）
• 需要派生状态时，应在组件 data 或 computed 中重新计算，而非修改 route 原始数据

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！