vue-router 的两种传参方式query和params的区别

1.query传参

query传参路径需要path类型

this.$router.push({path: '/details',query: {id:100}})

此时链接

http://zjh.com/#/details?id=100

接收参数方式

let id = this.$route.query.id;

2.params传参

params传参路径需要用name类型，否则接收不到参数

this.$router.push({name: 'details',params: {id:100}})

此时链接 

http://zjh.com/#/details

接收参数方式

let id = this.$route.params.id;

需要注意，使用params传递参数在链接中是看不到参数的。

但是，使用params传递参数不能刷新页面，一旦刷新页面，参数就会丢失，获取不到参数。

解决办法：

在路中添加参数

{
    path: '/details/:id',
    name: 'details',
    component: details,
},

 此时参数会已路由的方式显示在链接中

http://zjh.com/#/details/100

此时，再次刷新页面试一下，发现参数就不会丢失了