Vue组件通过URL传参本质是利用Vue Router解析query/params/hash并注入组件，实现路由与组件解耦；Route Params适用于语义化路径（如/user/:id），Query适用于可选筛选参数（如?page=2），推荐封装Hook统一处理类型转换与默认值。
Vue 组件通信中通过 URL 传递参数，本质是借助 Vue Router 的路由系统实现数据流转，而非直接向组件传 Props。关键在于：URL 参数（如 query、params、hash）由路由层解析并注入组件，组件本身不依赖父级显式传值，从而达成路由与组件逻辑的解耦。
用 Route Params 实现动态路径传参
适用于具有明确语义路径的场景（如 `/user/123`）。需在路由配置中声明动态段，并在组件内通过 $route.params 或 useRoute().params（组合式 API）读取。
- 路由定义：
{ path: '/user/:id', component: UserDetail } - 跳转方式：
<router-link :to="'/user/' + userId">或router.push({ name: 'User', params: { id: 123 } }) - 组件内获取：
const route = useRoute(); const id = route.params.id;（字符串类型，注意类型转换）
用 Query 参数实现可选、非层级化传参
适合筛选、分页、搜索等非核心路径语义的参数（如 ?page=2&sort=name）。参数不参与路由匹配，刷新页面仍保留，天然支持书签和分享。
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- 跳转示例：
router.push({ path: '/list', query: { page: 2, sort: 'name' } }) - 组件内读取：
const { page, sort } = route.query;（所有值均为字符串，需手动转类型） - 注意：query 修改会触发组件复用（
beforeRouteUpdate或watch($route)响应变化）
避免在组件内部硬编码路由逻辑
解耦的核心是让组件只关心“我需要什么数据”，不关心“这数据从哪来”。推荐封装自定义 Hook 或计算属性屏蔽来源细节：
立即学习“前端免费学习笔记（深入）”；
- 例如：
const userId = computed(() => Number(route.params.id) || Number(route.query.id) || 0); - 或提取为
useRouteId()Hook，统一处理类型转换、默认值、校验逻辑 - 组件模板中直接使用
{{ userId }}，不出现$route或route.params
不推荐将 URL 参数当作普通 Props 使用
虽然可通过 props: true 让 Vue Router 自动把 params 映射为组件 props，但这会隐式绑定组件与路由结构，降低组件复用性。例如该组件无法再被静态渲染或嵌入非路由上下文。
- 更可控的做法：在组件内部主动读取
route，再赋值给响应式数据或计算属性 - 若需强类型支持（如 TypeScript），配合
defineProps声明接口时，应基于业务语义（如userId: number），而非路由原始类型（string | string[]）
