vue Router(v3.x) 路由传参的三种方式详解

在Vue Router (v3.x)中，有三种常见的路由传参方式：

1. 使用 path 和 query 传递参数。
2. 使用 name 和 params 传递参数。
3. 使用 props 传递参数。

以下是详细的解释和代码示例：

1. 使用 path 和 query 传递参数：

// 定义路由
const routes = [
  { path: '/user/:id', component: User }
];
 
// 导航到路由，并传递参数
this.$router.push({ path: `/user/123`, query: { plan: 'private' } });
 
// 在User组件中接收参数
this.$route.params.id; // 123
this.$route.query.plan; // 'private'

2. 使用 name 和 params 传递参数：

// 定义路由，注意这里不能使用/:param，因为params传参方式不需要在路径中定义
const routes = [
  { name: 'user', path: '/user', component: User }
];
 
// 导航到路由，并传递参数
this.$router.push({ name: 'user', params: { id: 123, plan: 'private' } });
 
// 在User组件中接收参数
this.$route.params.id; // 123
this.$route.params.plan; // 'private'

3. 使用 props 传递参数：

// 定义路由，并设置props传参
const routes = [
  { path: '/user/:id', component: User, props: true }
];
 
// 导航到路由，并传递参数
this.$router.push({ path: `/user/123`, query: { plan: 'private' } });
 
// 在User组件中接收参数
this.$route.params.id; // 123
this.$route.query.plan; // 'private'
 
// 如果设置props为对象，则接收到的props为该对象
const routes = [
  { path: '/user/:id', component: User, props: { plan: 'private' } }
];
 
// 在User组件中接收参数
this.plan; // 'private'

注意：

• path 方式传递的参数可以在路由对应的组件中通过 $route.params 获取。
• name 方式传递的参数可以在路由对应的组件中通过 $route.params 获取。
• props 方式传递的参数，如果是 true，则接收所有 params 和 query；如果是一个函数，可以自定义返回给组件的 props；如果是一个对象，则直接将该对象作为 props 传递给组件。