Vue Router 传参方式

2024-08-31

字数：379字 | 预计阅读时长：1分钟

1.动态路由传参（params）

（1）定义路由（路径参数用 : 标记）：

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
const routes = [
  {
    path: '/user/:id',
    name: 'User',
    component: () => import('@/views/User.vue'),
    props: true // 可选：将 params 映射为组件的 props
  }
];
 
const router = createRouter({
  history: createWebHistory(),
  routes
});
 
export default router;

（2）传参：

// 使用 useRouter 跳转
import { useRouter } from 'vue-router';
 
const router = useRouter();
router.push({ name: 'User', params: { id: '123' } }); // 命名路由
// 或
router.push('/user/123'); // 路径形式

（3）接收参数：

方式 1：通过 useRoute 获取

<script setup>
import { useRoute } from 'vue-router';
 
const route = useRoute();
const userId = route.params.id; // 获取动态参数
</script>
 
<template>
  <div>User ID: {{ userId }}</div>
</template>

方式 2：通过 props 接收（需路由配置 props: true），因为params 是路由路径的一部分（如 /user/:id），属于“强依赖”参数，可以通过props 接收

<script setup>
defineProps(['id']); // 直接声明 props
</script>
 
<template>
  <div>User ID: {{ id }}</div>
</template>

2.查询参数（query）

（1）定义路由

1
2
3

const routes = [
  { path: '/user', component: User }
]

（2）传参

// 方式 1：通过对象传递
router.push({ path: '/user', query: { id: '123' } }); // URL: /user?id=123
 
// 方式 2：直接拼接路径
router.push('/user?id=123');

（3）接收参数

<script setup>
import { useRoute } from 'vue-router';
 
const route = useRoute();
const userId = route.query.id; // 获取查询参数
</script>