vue动态路由传参 this.$router和this.$route的区别

很多人对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