vue路由学习 --3 路由组件传值

1. 在路由配置中设置需要传递参数的路由，并在路由路径中定义参数占位符：

点击查看代码

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

2. 在触发路由跳转时，通过 router.push 方法传递参数：

点击查看代码

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

3. 在接收参数的组件中，可以通过 $route.params 来获取传递的参数：

点击查看代码

export default {
  mounted() {
    const userId = this.$route.params.id;
    console.log('User ID:', userId);
  }
};

在上面的示例中，我们定义了一个带有参数占位符 :id 的路由 /user/:id，并在触发路由跳转时传递了参数 { id: 123 }。在接收参数的 UserComponent 组件中，通过 $route.params.id 获取传递的参数值。

通过这种方式，您可以在 Vue 路由组件之间传递参数。希望这个示例对您有帮助。如果您有任何其他问题或需要进一步的帮助，请随时告诉我。