Vue中用this.$router传递参数与取值params和query的区别

在Vue中，this.$router用于编程式导航，即在JavaScript代码中控制路由。如果你需要在路由跳转时传递参数，可以通过路由的params或query选项来实现。

例如，你有一个路由配置如下：

const routes = [
  {
    path: '/user/:id',
    name: 'User',
    component: User
  },
  // ... 其他路由
];

你可以使用this.$router.push或this.$router.replace来传递参数：

// 使用 params 传值，注意这种方式要求目标路由的 name 是 'User'
this.$router.push({ name: 'User', params: { id: 123 } });
 
// 使用 query 传值，适用于不需要在路由配置中定义参数的场景
this.$router.push({ path: '/user', query: { id: 123 } });
接收参数的组件中：

export default {
  // ...
  mounted() {
    // 使用 params 时
    const userId = this.$route.params.id;
 
    // 使用 query 时
    const userId = this.$route.query.id;
  }
};

params适用于路由参数必须与路由定义一致的情况，query则不需要。记得在使用params时，路径中的:id是必须的，否则路由不会正确匹配。