vue实现不同页面数据传递——路径参数

1.动态路由定义

在路由表中按如下格式编写：

{
  path: '/user/:id', // 动态路径参数 :id
  name: 'user',
  component: User
}

在这个例子中，:id是一个动态路径参数，它表示URL中/user/之后的部分应该被捕获为一个名为id的参数。

2.参数传递

可以使用编程式导航：

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

在这个例子中，我们使用了命名路由'user'，并通过params对象传递了一个id参数。

也可以声明式导航：

<router-link :to="{ name: 'user', params: { id: 123 } }">User</router-link>

或者

<router-link :to="`/user/${userId}`">User</router-link>

3.参数接收

在目标组件中，你可以通过this.$route.params对象来访问传递的路由参数。例如，在上面的User组件中，可以这样获取id参数：

export default {
  mounted() {
    const userId = this.$route.params.id; // 获取传递的id参数
    // 使用userId进行其他操作...
  }
}