Vue 基础如何在单页应用中通过路由参数传递与接收详情页数据

Vue详情页数据传递推荐用params传ID（如/article/123），需路由声明动态段、命名路由跳转并监听$route变化；query适合传辅助参数（如/article?id=123），刷新不丢失但需手动类型转换；接收后须校验参数、处理加载态与错误，并配合scrollBehavior和keep-alive保持返回时滚动位置。

在 Vue 单页应用中，详情页的数据传递和接收主要靠 Vue Router 的参数机制实现。关键不是“传什么”，而是“怎么传、在哪收、怎么用”——选对方式能避免刷新丢数据、路由不匹配、响应不及时等问题。

用 params 传 ID 类核心标识（推荐用于详情页）

params 适合传递资源唯一 ID（如 /article/123），路径语义清晰、SEO 友好，且天然绑定路由定义。

1. 先在 router 配置中声明动态段：{ path: '/article/:id', name: 'ArticleDetail', component: ArticleDetail }
2. 跳转时用命名路由 + params：this.$router.push({ name: 'ArticleDetail', params: { id: 123 } })（注意：不能用 path + params，否则参数丢失）
3. 组件内实时获取：this.$route.params.id；为防路由复用（比如从 /article/1 切到 /article/2），建议监听 $route 变化：

   watch: { '$route': 'fetchData' }

用 query 传筛选或辅助信息（适合带搜索/分页的详情入口）

query 参数出现在 URL 问号后（如 /article?id=123&from=list），页面刷新不丢失，适合携带非核心但需保留的状态。

1. 跳转时直接加 query：this.$router.push({ path: '/article', query: { id: 123, from: 'list' } })
2. 组件中取值：this.$route.query.id，无需额外监听，因为 query 改变会触发组件重新渲染（Vue Router 默认行为）
3. 注意：query 值始终是字符串，id 接收后需手动转数字：parseInt(this.$route.query.id)

接收数据后如何安全使用

别一拿到参数就直接请求，得考虑加载态、错误处理和空值边界。

1. 在 mounted 中首次获取，同时设 loading 状态
2. 用 watch 监听 $route.params 或 $route.query，确保参数变更后重新拉数据
3. 请求前校验参数有效性，比如 if (!this.$route.params.id) return，避免发空 ID 请求
4. 服务端返回 404 时，可调用 this.$router.replace('/404') 或展示友好提示

回退时保持原列表滚动位置（增强体验）

详情页返回列表页，用户常希望回到刚才看的位置，而不是顶部。

1. 在列表页启用 scrollBehavior（Vue Router 配置中）：

   scrollBehavior(to, from, savedPosition) { return savedPosition || { top: 0 } }

2. 配合 <keep-alive> 缓存列表组件，避免重复请求和状态重置
3. 若不用 keep-alive，可在列表页 activated 钩子中恢复 scrollY