Vue获取路由参数、获取路径参数
Vue 怎么样获取路由参数，路径携带的参数
一、通过 Query 参数传值（如 /url?id=1&name=2）
提示
https://example.com/user?id=123&name=alice（查询参数）
Vue3 （使用 Composition API）
// url.vue
<script setup lang="ts">
import { useRoute } from 'vue-router';
const route = useRoute();
// 获取 query 参数
const id = route.query.id; // '1'
const name = route.query.name; // '2'
console.log('Query params:', { id, name });
</script>Vue 2（Options API）
<script>
// url.vue
export default {
mounted() {
const id = this.$route.query.id;
const name = this.$route.query.name;
console.log('Query params:', { id, name });
}
}
</script>二、通过动态路径传参（如 /u/123/456）
提示
https://example.com/user/123/alice（动态路径参数）
路由配置（Vue Router 3 / Vue Router 4 均适用）
<script>
// router/index.js
const routes = [
// ✅ 方式一：直接在目标组件中接收 params（推荐）
{
path: '/u/:id/:name',
component: () => import('@/pages/User.vue')
},
// ✅ 方式二：将路径参数自动转为 query 参数（适合兼容旧逻辑或统一处理）
{
path: '/jd/:user_shop_id/:token',
redirect: (to) => ({
path: '/DongGroup',
query: {
user_shop_id: to.params.user_shop_id,
token: to.params.token
}
})
},
{
path: '/DongGroup',
component: () => import('@/pages/DongGroup.vue')
}
]
</script>重要
- 方式一访问 /u/123/alice 后，地址栏保持不变，组件通过 route.params 获取值
- 方式二访问 /jd/888/abc 后，会自动跳转到 /DongGroup?user_shop_id=888&token=abc，地址栏更新，组件通过 route.query 获取值 —— 完全复用你原有的逻辑
Vue 3（Composition API）
<script setup lang="ts">
import { useRoute } from 'vue-router';
const route = useRoute();
// 若路由为 /u/:id/:name
const id = route.params.id; // '123'
const name = route.params.name; // 'alice'
console.log('Params:', { id, name });
</script>Vue 2（Options API）
<script>
export default {
mounted() {
const id = this.$route.params.id;
const name = this.$route.params.name;
console.log('Params:', { id, name });
}
}
</script>Query 参数 vs Params 参数 对比表
| 特性 | Query 参数 (?key=value) | Params 参数 (/value) |
|---|---|---|
| URL 示例 | /page?id=1&name=foo | /page/1/foo |
| 获取方式 | route.query.id | route.params.id |
| 刷新保留 | 是 | 是（需正确配置路由） |
| 适合场景 | 筛选、分页、临时状态 | 资源 ID、详情页、语义化路径 |
| 是否暴露敏感信息 | 易被记录 | ️ 同样可见，但无 ? |
版权所有
版权归属：念宇