vue3 vue-router 传递路由参数

在 Vue 3 中，使用 vue-router 传递路由参数是非常常见的需求。

1. 使用动态路由参数（`params`）

动态路由参数是定义在路由规则中的占位符部分，例如 /user/:id。你可以通过 router.push 或 <router-link> 传递这些参数。

(1) 配置动态路由

import { createRouter, createWebHistory } from 'vue-router';const routes = [{path: '/user/:id', // 动态参数 :idcomponent: () => import('@/views/UserDetail.vue')}
];const router = createRouter({history: createWebHistory(),routes
});export default router;

(2) 通过 `router.push` 传递参数

import { useRouter } from 'vue-router';export default {setup() {const router = useRouter();const navigateToUser = (userId) => {router.push({ name: 'user', params: { id: userId } }); // 传递参数};return { navigateToUser };}
};

(3) 在目标组件中获取参数

import { useRoute } from 'vue-router';export default {setup() {const route = useRoute();const userId = route.params.id; // 获取动态参数return { userId };}
};

2. 使用查询参数（`query`）

查询参数是 URL 中 ? 后面的部分，例如 /search?name=Vue&id=123。你可以通过 router.push 或 <router-link> 传递查询参数。

(1) 通过 `router.push` 传递查询参数

import { useRouter } from 'vue-router';export default {setup() {const router = useRouter();const navigateToSearch = () => {router.push({path: '/search',query: { name: 'Vue', id: 123 } // 传递查询参数});};return { navigateToSearch };}
};

(2) 在目标组件中获取查询参数

import { useRoute } from 'vue-router';export default {setup() {const route = useRoute();const name = route.query.name; // 获取查询参数const id = route.query.id;return { name, id };}
};

3. 使用命名路由（推荐）

如果你的路由配置中定义了 name 属性，可以通过命名路由传递参数，这样可以避免硬编码路径。

(1) 定义命名路由

const routes = [{path: '/user/:id',name: 'user', // 定义路由名称component: () => import('@/views/UserDetail.vue')}
];

(2) 通过 `router.push` 使用命名路由传递参数

import { useRouter } from 'vue-router';export default {setup() {const router = useRouter();const navigateToUser = (userId) => {router.push({name: 'user', // 使用路由名称params: { id: userId } // 传递动态参数});};return { navigateToUser };}
};

4. 使用 `<router-link>` 传递参数

除了编程式导航（router.push），你还可以通过 <router-link> 传递参数。

(1) 传递动态参数

<template><router-link :to="{ name: 'user', params: { id: 123 } }">跳转到用户详情页</router-link>
</template>

(2) 传递查询参数

<template><router-link :to="{ path: '/search', query: { name: 'Vue', id: 123 } }">跳转到搜索页</router-link>
</template>

5. 区分动态参数和查询参数

类型	位置	示例 URL	获取方式
动态参数 (`params`)	路径中	`/user/123`	`route.params.id`
查询参数 (`query`)	URL 的 `?` 后	`/search?name=Vue&id=123`	`route.query.name`

6. 注意事项

动态参数会被移除
- 如果你在导航时切换了路由，但没有重新设置动态参数，那么参数会被清除。
- 解决方法：确保在导航时重新传递参数，或者使用 watch 监听 route.params 的变化。
查询参数不会被移除
- 查询参数会保留在 URL 中，直到你手动清除或覆盖它们。
强制刷新页面时丢失参数
- 如果用户刷新页面，动态参数和查询参数仍然可以从 route.params 和 route.query 中获取。

7. 完整示例

路由配置

const routes = [{path: '/user/:id',name: 'user',component: () => import('@/views/UserDetail.vue')},{path: '/search',name: 'search',component: () => import('@/views/SearchPage.vue')}
];

导航组件

<template><div><!-- 传递动态参数 --><router-link :to="{ name: 'user', params: { id: 123 } }">查看用户详情</router-link><!-- 传递查询参数 --><router-link :to="{ path: '/search', query: { name: 'Vue', id: 123 } }">搜索内容</router-link></div>
</template>

接收参数的目标组件

<template><div><p>用户 ID: {{ userId }}</p><p>查询参数 Name: {{ name }}</p><p>查询参数 ID: {{ id }}</p></div>
</template><script>
import { useRoute } from 'vue-router';export default {setup() {const route = useRoute();const userId = route.params.id; // 获取动态参数const name = route.query.name; // 获取查询参数const id = route.query.id;return { userId, name, id };}
};
</script>