vue params传参

作者：亡梦发布日期:2025-09-08 浏览:101

// 定义路由时使用 params 传参

// 1. 在 router/index.js 中定义路由规则
const routes = [
  {
    path: '/user/:id', // :id 表示这是一个动态参数
    name: 'User',
    component: User
  }
]

// 2. 在组件中使用 $router.push() 方法进行跳转并传递参数
this.$router.push({ name: 'User', params: { id: 123 }});

// 3. 在目标组件中接收参数
// 在 User.vue 组件中可以通过 this.$route.params 来获取参数
export default {
  created() {
    console.log(this.$route.params.id); // 输出: 123
  }
}

解释说明：

定义路由：在路由配置中，:id 是一个动态参数，表示 URL 中的 id 可以是任意值。
传递参数：使用 $router.push() 方法可以跳转到指定路由，并通过 params 选项传递参数。
接收参数：在目标组件中，可以通过 this.$route.params 获取传递过来的参数。

上一篇：vue3 mixins 代替

下一篇：vue监听sessionstorage变化