用路由对象拿参数路径参数在Vue路由中可以通过动态参数和查询参数来传递参数值

作者：网络发烧程序猿 | 发布时间：2025-06-27 |

一、用路由对象拿参数

在Vue里，用路由对象是最直接的方法来获取参数。这个对象里包含了当前页面的所有路由信息，包括那些在路径里或是在查询里加的参数。

路径参数

设置路由的时候，可以在路径里用冒号来标记那些会变化的参数。比如：

路由配置：/user/:id

在组件里，这样取参数：$route.params.id

查询参数

查询参数就是那些在URL后跟问号和键值对的参数。比如：

URL：/user?id=123

在组件里，这样取参数：$route.query.id

二、用props传参数

通过props传参数，你可以把路由参数直接给组件用，这样组件就更有用了，可以被复用。

路径参数作为props

在路由配置里，这样设置就可以把路径参数作为props传递：props: true

在组件里，直接用props取参数：this.$route.params.id

自定义props函数

你还可以自定义一个函数来处理props，这样可以对参数做点处理：

路由配置：props: (route) => ({ id: route.params.id })

在组件里，用同样的方式取参数：this.$route.params.id

三、用query参数

query参数通常用来传递那些不是必须的参数，比如筛选条件或者分页信息。

获取查询参数

在组件里，这样取查询参数：$route.query.id

定义路由

在定义路由的时候，不需要特别指定查询参数，它们是可选的，可以在任何路由里用。

传递查询参数

在导航的时候，你可以用query或者params来传递查询参数：

比如：router.push({ query: { id: 123 } })

四、总结与建议

在Vue路由里，获取参数主要有三种方法：用路由对象、用props传参和通过query参数。每种方法都有自己的适用场景和优缺点：

方法	适用场景	优缺点
使用路由对象	直接获取当前路由信息	简单直接，但耦合度高
使用props传参	将路由参数作为组件props传递	增强组件复用性
通过query参数	传递非必要参数	灵活性高

根据你的具体需求来选择合适的方法，同时注意代码的可维护性和可读性。用对参数获取方式，能让你代码质量更高，开发效率也更高。