首先简单来说明一下$router和$route的区别

//$router：是路由操作对象，只写对象
///$route：路由信息对象，只读对象
//操作 路由跳转
this.$router.push({
    name: 'hello',
    params: {
        name: 'world',
        age: '100'
    }
})
//读取 路由参数接收 
this.name = this.$route.params.name;
this.age = this.$route.params.age;

params和query的区别

1.跳转方式不同

query可以使用name或者path方式跳转

//query传参，使用name跳转
this.$router.push({
    name:'second',
    query: {
        queryId:'20180822',
        queryName: 'query'
    }
})

//query传参，使用path跳转
this.$router.push({
    path:'second',
    query: {
        queryId:'20180822',
        queryName: 'query'
    }
})

//query传参接收
this.queryName = this.$route.query.queryName;
this.queryId = this.$route.query.queryId;

params只能使用name方式进行跳转引入

//params传参 使用name
this.$router.push({
  name:'second',
  params: {
    id:'20180822',
     name: 'query'
  }
})

//params接收参数
this.id = this.$route.params.id ;
this.name = this.$route.params.name ;

2.浏览器url显示的不同

//使用params时
//路由 
{ 
    path: '/second/:id/:name', 
    name: 'second', 
    component: () => import('@/view/second') 
}
//传参
this.$router.push({
    name: 'second',
    params: {
        id: '1245314',
        name: 'wendy'
    }
})
//浏览器url地址 页面刷新时参数不会丢失
localhost:8080/second/1245314/wendy
//如果路由后面没有 /:id/:name效果如下图，注意：地址栏没有参数,页面一刷新参数就会丢失
localhost:8080/second
//接收参数
this.$route.params.id
this.$route.params.name

//使用query时
//传参
this.$router.push({
    name:'second',
    query: {
        queryId:'20180822',
        queryName: 'query'
    }
})
//浏览器url地址
localhost:8080?queryId='20180822'&queryName='query'
//页面刷新时参数不会丢失，因为参数写在地址栏上了