中国建设造价工程协会网站文化建设设计公司网站

在Vue.js中使用Vue Router进行路由管理时，传递和获取参数是常见的需求。这里介绍三种主要的路由传参和获取参数的方式：

1. 通过URL的查询参数（Query Parameters）

传递参数：

当你需要传递一些非敏感数据（如搜索查询），可以使用URL的查询参数（query）。这可以通过router.push或this.$router.push方法，并传递一个包含path和query的对象来实现。

this.$router.push({ path: '/some-path', query: { userId: 123 }});

这会导致URL变成/some-path?userId=123。

获取参数：

在目标组件中，可以通过this.$route.query来获取这些查询参数。

export default {  created() {  console.log(this.$route.query.userId); // 输出：123  }  
}

2. 通过路由的params参数（动态路由匹配）

定义路由：

首先，你需要在路由定义中使用动态片段（如:id）来定义参数。

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

传递参数：

当使用router.push或<router-link>时，不需要在params中显式传递参数，而是通过路径中的动态片段来传递。

this.$router.push('/user/123');