本文共 1451 字，大约阅读时间需要 4 分钟。

很多人对this.$router\ast \ast 和\ast \ast this.$route的区别不是很清楚

首先,我看来 this.$router拿到的是newRouter并且在每个创建出来的组件中都会被赋予一个$router 然后,this.$route拿到的是route路由规则中被激活的当前组件(一般可以传取参数)因此，组件接受传过来的值一般都是this.$route.params.id或 this.$route.query.id

进入正题：

**1.调用$router.push实现携带参数的跳转\ast \ast 方法内使用：this.$router.push({ path: /about/${username} })

需要的路由配置如下：

{ path: ‘/home/:username’, name: ‘home’, component: Home, }

另一个组件获取路由方式：

this.$route.params.username

2.query传递参数（命名路由传参）

注意：

1.命名路由传参 注意使用params不是query 且query会显示在地址栏中

方法内使用：

this.$router.push({ path: ‘/about’, query: { username: this.username } })

需要的路由配置如下：

{ path: ‘/home’, name: ‘home’, component: Home, }

另一个组件获取路由方式：

this.$route.query.username

3.params传递参数（命名路由传参）

方法内使用：

this.$router.push({ name: ‘about’, params: { username: this.username } })

注：这里我发现个特别的 this.$router.push({ path: ‘/about’, params: { username: this.username } })当用params动态参数时用path来跳转是获取不到传递的参数值的，这个我也不是很清楚为什么不行。试了很多次。

需要的路由配置如下：

{ path: ‘/home’, name: ‘home’, component: Home, }

另一个组件获取路由方式：

this.$route.params.username

转载地址：https://blog.csdn.net/weixin_46182770/article/details/120392260 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！