路由参数是 Vue Router 在页面间传递数据的三条主要通道。它们各有适用场景，错用容易导致 URL 混乱或数据丢失，所以需要清楚地知道每条通道的特点和正确用法。
路径参数（Params）
路径参数是 URL 路径的一部分，通常用来标识一个具体的资源。比如 /user/123 中的 123 就是一个路径参数，它告诉页面“我要展示 ID 为 123 的用户”。
定义路由：
// router/index.js
const routes = [
{
path: '/user/:id', // :id 就是路径参数占位符
component: () => import('@/views/UserDetail.vue')
}
]参数名跟在冒号后面，可以定义多个，也支持可选参数（:id?）或通配符（*）。但最常用的还是固定参数格式。
在组件中获取：
Vue Router 4 提供了组合式 API useRoute，它返回当前路由的响应式对象：
<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
// 路径参数都在 route.params 里，key 即路由定义中的 :id
console.log(route.params.id) // 访问 /user/42 时输出 '42'
</script>传递方式：
跳转时必须通过路由的 name 或完整 path 来携带参数。用 name + params 是最稳妥的方式，因为不会因为路径拼写错误而出问题：
import { useRouter } from 'vue-router'
const router = useRouter()
// 编程式导航
router.push({ name: 'UserDetail', params: { id: '42' } })如果用 path + params，params 会被忽略，这是 Vue Router 的一个硬性规则，记住就行：params 必须配合 name 使用。
注意事项：
- 路径参数在 URL 中是可见的、必占位置的。刷新页面时参数仍在，这正是它的优点——适合标识页面资源的 ID。
- 参数变化时，如果只是从
/user/1跳转到/user/2，组件默认会被复用。如果你在setup里依赖route.params.id做一些请求，需要用watch或watchEffect监听参数变化，否则数据不会更新。
查询参数（Query）
查询参数是 URL 中 ? 后面的键值对，比如 /search?keyword=vue&page=2。它常用于筛选条件、分页、排序等可选、非必需的参数，这些参数不影响页面路由的匹配，只是给页面组件提供额外的上下文。
定义路由时不需要特殊声明，任何路由都能携带查询参数。路由配置的变化不会影响查询参数的存在。
在组件中获取：
同样使用 useRoute，参数在 route.query 对象中：
<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route.query.keyword) // 'vue'
console.log(route.query.page) // '2' (注意值都是字符串)
</script>传递方式：
既可以写在 to 的字符串中，也可以用对象形式，非常灵活：
// 声明式导航
<router-link :to="{ path: '/search', query: { keyword: 'vue', page: 2 } }">搜索</router-link>
// 编程式导航
router.push({ path: '/search', query: { keyword: 'vue', page: 2 } })
// 或直接字符串
router.push('/search?keyword=vue&page=2')特点：
- 查询参数是可选的、可叠加的，非常适合维持页面状态（比如用户从列表页跳到详情页再返回时，列表的筛选条件和页码还能保留）。
- 需要注意，
route.query里的值类型都是string（或string[]），数字类型会变成字符串，使用时要手动转换。 - 当查询参数变化时，Vue Router 同样会尝试复用组件（如果是同一个路由匹配），所以也需要用侦听器来响应参数变化。
路由元信息（Meta）
元信息是用来给路由附加自定义数据的字段，它不直接显示在 URL 上，也不会自动传给组件，而是挂在路由记录的 meta 属性上，供路由守卫、导航逻辑或全局混入使用。
定义方式：
在路由配置的每个路由对象中添加 meta 字段，内容完全是自定义的：
const routes = [
{
path: '/admin',
component: () => import('@/views/Admin.vue'),
meta: { requiresAuth: true, title: '管理后台', icon: 'setting' }
},
{
path: '/login',
component: () => import('@/views/Login.vue'),
meta: { title: '登录' }
}
]在组件中获取：useRoute 返回的 route.meta 是一个响应式对象，包含当前匹配路由的 meta：
<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route.meta.requiresAuth) // true
console.log(route.meta.title) // '管理后台'
</script>最实用的两个场景：
① 权限控制
在全局前置守卫里读取 meta.requiresAuth，没有则重定向到登录页：
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !isLoggedIn()) {
next('/login')
} else {
next()
}
})② 动态设置页面标题
可以在全局后置钩子或组件内，根据 meta.title 更新 document.title：
router.afterEach((to) => {
document.title = to.meta.title || '默认标题'
})这样每定义一个新路由，只需要写上 title，标题自动更新。
注意事项：
meta是可继承的：如果父路由有meta，子路由可以访问到它（因为matched数组包含了所有匹配的层级）。但route.meta是合并后的结果，这也是一个容易踩坑的点。如果要精确只获取当前路由的元信息，可以通过route.matched[route.matched.length - 1].meta。- 不要把太大的对象放进
meta，它会在路由跳转时一直存在于内存中。只放轻量的配置信息即可。
这三类参数分工明确：路径参数标识“哪一个资源”，查询参数描述“用什么条件看”，元信息则给了每个路由“隐藏的身份标签”。按这个原则来用，路由设计会清晰很多。