异常教程
vue3 获取路由参数（长文解析）
💡一则或许对你有用的小广告
欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论
- 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于
Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;- 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;
截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观
在现代前端开发中，路由系统是构建单页应用（SPA）的核心能力之一。Vue 3 通过 Vue Router 提供了强大的路由管理功能，而vue3 获取路由参数则是实现页面间数据传递的关键技能。无论是电商网站的商品详情页、用户个人中心，还是搜索结果的动态展示，都需要开发者能够灵活地从路由中提取参数。本文将从基础概念、实现方法、实际案例到常见问题，系统性地讲解如何在 Vue 3 中高效获取路由参数，帮助开发者快速上手并避免常见错误。
路由参数的基本概念
什么是路由参数？
路由参数是指通过 URL 传递的动态信息，通常用于标识资源或过滤数据。例如：
http://example.com/products/123中的123是商品 ID 的参数（路径参数）。http://example.com/search?keyword=vue中的vue是搜索关键词的参数（查询参数）。
在 Vue 3 中，路由参数分为两类：路径参数（params）和查询参数（query）。两者的区别可以通过一个比喻理解：
- 路径参数如同快递单上的详细地址，是 URL 结构中固定位置的参数，通常用于唯一标识资源。
- 查询参数则像快递包裹上的附加说明，是 URL 末尾的键值对，用于传递非结构化的额外信息。
如何在 Vue 3 中获取路由参数？
方法 1：使用 useRoute() 响应式获取参数
Vue Router 4+ 推荐使用组合式 API 的 useRoute 函数来获取当前路由对象。通过该对象可以访问 params 和 query 属性。
示例代码（路径参数）：
<script setup>
import { useRoute } from 'vue-router';
const route = useRoute();
const productId = route.params.id; // 假设 URL 是 /products/123
</script>
示例代码（查询参数）：
<script setup>
import { useRoute } from 'vue-router';
const route = useRoute();
const searchKeyword = route.query.keyword; // 假设 URL 是 /search?keyword=vue
</script>
特点：
- 响应式：当路由变化时，
route对象会自动更新，无需手动订阅事件。 - 简单直接：适用于大多数基础场景。
方法 2：通过 this.$route（选项式 API）
在选项式 API 中，可以通过 this.$route 访问路由对象。但需注意，这种方式在 Vue 3 中不再推荐，且不自动响应变化。
<template>
<div>{{ product.id }}</div>
</template>
<script>
export default {
computed: {
product() {
return this.$route.params.id; // 需要通过 computed 实现响应式
}
}
};
</script>
注意事项：
- 需手动通过
computed或watch实现响应式更新。 - 逐步被淘汰，建议新项目使用组合式 API。
方法 3：在路由配置中定义动态路径
要获取路径参数，必须先在路由配置中定义动态段。例如：
// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import ProductDetail from '@/views/ProductDetail.vue';
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: '/products/:id', // :id 表示动态参数
component: ProductDetail
}
]
});
export default router;
关键点：
- 动态路径段以
:开头，名称需与组件中使用的参数名一致。 - 查询参数无需预先定义，直接附加在 URL 后即可。
实际案例：电商商品详情页
场景描述
假设我们正在开发一个电商网站，用户点击商品列表中的某项后，跳转到对应的详情页。此时需要从 URL 中提取商品 ID，进而向后端请求数据。
实现步骤
-
定义路由：在路由配置中声明动态路径：
{ path: '/products/:id', component: ProductDetail } -
组件内获取参数：在商品详情页组件中使用
useRoute：<script setup> import { ref, onMounted } from 'vue'; import { useRoute } from 'vue-router'; const route = useRoute(); const productId = route.params.id; // 获取商品 ID const product = ref({}); onMounted(() => { // 模拟 API 请求 getProductData(productId).then(data => { product.value = data; }); }); </script> -
页面跳转：在商品列表页中，通过
router-link或编程式导航传递参数：<!-- 商品列表页 --> <template> <div v-for="item in products" :key="item.id"> <router-link :to="`/products/${item.id}`">{{ item.name }}</router-link> </div> </template>
扩展思考：
- 若需要传递多个参数（如分类和页码），可结合路径参数和查询参数：
http://example.com/products/123?category=electronics&page=2 - 可通过
useRoute().query获取category和page的值。
进阶技巧与常见问题
技巧 1：默认参数值
当路径参数可能不存在时（例如未正确跳转），可通过解构赋值或默认值避免报错：
const productId = route.params.id || 'default-id';
// 或使用可选链操作符
const productId = route.params?.id;
技巧 2：导航守卫中获取参数
在全局或路由级别的导航守卫中，可通过 to 对象访问即将进入的路由参数：
// 全局 beforeEach 守卫
router.beforeEach((to, from) => {
const productId = to.params.id;
// 执行权限校验或日志记录
});
问题 1：参数值始终为字符串类型
Vue Router 的路径参数默认以字符串形式返回，若需转换为数字，可手动处理：
const productId = Number(route.params.id); // 将 "123" 转为 123
问题 2：页面刷新后参数丢失
由于 Vue Router 默认使用 HTML5 的 history 模式，服务器需配置正确路由才能支持页面刷新。若出现 404 错误，需在服务器配置中将所有路径重定向到 index.html。
总结
本文通过基础概念、代码示例和实际案例，详细讲解了vue3 获取路由参数的核心方法。关键点总结如下：
- 路径参数（params）通过动态路由定义，适用于资源标识；
- 查询参数（query）通过 URL 末尾的键值对传递，适合非结构化信息；
- 组合式 API 的
useRoute是推荐的获取方式，因其简洁且响应式； - 在复杂场景中，结合导航守卫和元信息（meta）可实现更灵活的路由控制。
掌握这些技巧后，开发者可以轻松实现页面间的数据传递，构建出功能丰富的单页应用。后续可进一步探索路由懒加载、嵌套路由等高级功能，提升项目的性能和可维护性。