1query 方式（地址栏会带 ?xxx）

https://example.com/user?id=123

this.$router.push({ path: '/user', query: { id: 123 } })

✅ Vue 3 路由传参方式与获取方式（基于 Vue Router 4）

import { useRoute, useRouter } from 'vue-router'
1. params 方式https://example.com/user/123

const router = useRouter()
router.push({ name: 'UserDetail', params: { id: 123 } })

获取

const route = useRoute()
const id = route.params.id

2. query 方式

🔸 传参（使用 query）：https://example.com/user?id=123

router.push({ path: '/user', query: { id: 123 } })
获取
const id = route.query.id

路由明文都不安全，使用 Vuex、Pinia、localStorage、sessionStorage、或者临时缓存如果只是普通筛选、分页页码这种非敏感信息，可以用 query 比较方便。

query:查询字符串参数，通常将参数附加到URL的？号后面，优点是可选查询多个参数，缺点是会将数据暴露在URL上。 params:获取动态路由参数，在路径中的动态部分绑定数据参数属性来实现传递参数。 state:用来传递不显示在 URL 上的数据,通常用于当前页面和要跳转的页面之间使用。

3meta（路由元信息）

{
    path:'/list',
    name:'list',
    meta:{
        xxoo:'xxx'  //路由元信息
    },
},

获取

// 路由对象
const route = useRoute();

// 页面类型（从路由 meta 获取）
const pageType = computed(() => route.meta.type as string);