首先要知道的是

vue 中 this.router 和 this.route 的区别

this.router 相当于一个全局的路有对象，路由操作对象，只写对象 （跳转时使用）
this.route 表示当前路由对象，是路由信息对象，只读对象 （获取当前路由时使用）

然后了解 params和query 使用传参区别

params 传参需要使用name引用
query 可以使用name和path引用

router.push({ name: 'user', params: { userId: '123' }})

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
router.push({ name: 'register', query: { plan: 'private' }})

然后了解 params和query 接收参数区别

this.$route.query.paramsName;
this.$route.params.paramsId

需要使用对应的方法名接收参数

params可以接收路由中定义属性传参path: ‘/second/:id/:name’,

{
path: '/second/:id/:name',
name: 'second',
component: () => import('@/view/second')
}

this.$route.params.id
params 路由参数一旦设置在路由就属于路由的一部分