Vue.js中获取路由几种方式·params·如果需要传递静态参数且组件解耦推荐使用props

作者：机器人技术佬 | 发布时间：2025-07-01 |

Vue.js中获取路由参数的几种方式

一、使用this.$route.params

在Vue.js中，使用this.$route.params可以轻松获取跳转时携带的参数。首先需要在路由配置中定义带参数的路径，然后在组件中通过this.$route.params来访问这些参数。

二、示例：定义带参数的路径

假设我们有一个路由配置如下：

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

在UserComponent组件中，你可以通过this.$route.params.id获取到id参数的值。

三、具体代码示例

以下是获取参数的具体代码：

// 路由配置
const routes = [
  { path: '/user/:id', component: UserComponent }
];

// UserComponent组件中
export default {
  name: 'UserComponent',
  created() {
    console.log(this.$route.params.id); // 输出id参数的值
  }
}

四、优点与缺点

优点 缺点
通过路径直接传递参数，方便直观。 路径参数不适合传递复杂的数据结构。
页面刷新时参数依然保留。 无

五、总结

在Vue.js中，获取路由参数的三种方式各有优缺点，具体选择哪种方式取决于你的需求。