Vue-Router 如何进行参数的传递？在目标页面如何接收参数？

Vue-Router 是 Vue.js 的官方路由管理器，它允许你通过不同的 URL 访问不同的组件。在 Vue-Router 中传递参数主要有两种方式：通过 URL 的查询参数（query）和通过 URL 的路径参数（params）。

1. **通过查询参数（query）传递参数：**

在源页面，你可以使用 `this.$router.push` 或 `this.$router.replace` 方法，并在其中添加查询参数。例如：

   this.$router.push({ path: '/user', query: { name: 'John', age: 18 } });
   // 或者
   this.$router.push({ name: 'user', query: { name: 'John', age: 18 } });

在目标页面，你可以通过 `this.$route.query` 来接收这些参数：

   mounted() {
     console.log(this.$route.query.name); // 输出: John
     console.log(this.$route.query.age); // 输出: 18
   }

2. **通过路径参数（params）传递参数：**

首先，需要在路由配置中使用通配符来指定路径参数，比如：

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

在源页面，使用 `this.$router.push` 或 `this.$router.replace` 方法传递参数：

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

在目标页面，同样可以使用 `this.$route.params` 来接收这些参数：

   mounted() {
     console.log(this.$route.params.id); // 输出: 123
   }

请注意，在使用 `params` 时，应确保路由配置和跳转时传递的参数名称相匹配。