Vue.js中的路由跳传参方法·需要在路由配置中定义参数占位符·下面我们来看看这两种方法的详细说明和实例

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

在Vue.js中，路由跳转传参主要有两种方式：通过URL传递参数和通过props传递参数。下面我们来看看这两种方法的详细说明和实例。

通过URL传递参数是最常见的传参方式，它又分为路径参数和查询参数两种。

路径参数直接嵌入在URL路径中，需要在路由配置中定义参数占位符。

查询参数附加在URL的末尾，以键值对的形式存在。

通过props传递参数更加清晰和组件化，适合在父组件向子组件传递参数的场景。需要在路由配置中启用props。

下面是路径参数和查询参数的一些对比特点：

下面是两个简单的实例，展示了如何通过路径参数和查询参数传递参数。

路由配置：

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: UserComponent }
  ]
})

路由跳转：

router.push({ name: 'user', params: { id: 123 } })

目标组件获取参数：

export default {
  mounted() {
    console.log(this.$route.params.id) // 输出：123
  }
}

路由跳转：

router.push({ path: '/search', query: { keyword: 'Vue.js' } })

目标组件获取参数：

export default {
  mounted() {
    console.log(this.$route.query.keyword) // 输出：Vue.js
  }
}

在Vue.js中，根据具体的应用场景选择合适的传参方式，可以提升代码的可维护性和可读性。路径参数和查询参数各有优缺点，props传递参数则更适合组件化开发。

在实际项目中，建议结合项目需求和参数的特性，选择合适的传参方式。同时，为了提高代码的可维护性，可以结合Vuex等状态管理工具，实现更复杂的状态管理和参数传递。