vue-router路由动态传参query和params的区别

1.query方式传参和接收参数

//路由

{
   path: '/detail',   //这里不需要参入参数
   name: "detail",
   component: detail//这个details是传进来的组件名称
 }


//使用： 
//方法1：
<router-link :to="{ name: 'details', query: { id: 123 }}">
点击按钮
</router-link>

//方法2：
<router-link :to="{ path: 'details', query: { id: 123 }}">
点击按钮
</router-link>

//方法3：
this.$router.push({name:'details',query:{id:123}})

//方法4：
this.$router.push({path:'details',query:{id:123}})

$页面url显示结果是$：http://localhost:8081/#/details?id=123

$接受参数$ : this.$route.query.id

2.params方式传参和接收参数

//路由
{
   path: '/detail/:id/',    //后面要带参数!!!!!!
   name: "detail",
   component: detail 
 }

//使用： 
//方法1：
<router-link :to="{ name: 'details', params: { id: 123 }}">
点击按钮
</router-link>

//方法2：
this.$router.push({name:'details',params:{id:123}})

$页面url显示结果是$：http://localhost:8081/#/details/123

$接受参数$ : this.$route.params.id

总 结：
直白的来说 query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数；
而 params相当于post请求，参数不会再地址栏中显示