vue param和query两种传参方式

1、传参方式

　　query传参方式

this.$router.push({
   path: "/home",
   query: {code:"123"}
})    

　　

　　param传参方式

this.$router.puth({
   name: "/home",
   param: {code: "123"}
})

// 字符串
<router-link to="apple"> to apple</router-link>
// 对象
<router-link :to="{path:'apple'}"> to apple</router-link>
// 命名路由
<router-link :to="{name: 'applename'}"> to apple</router-link>
//直接路由带查询参数query，地址栏变成 /apple?color=red
<router-link :to="{path: 'apple', query: {color: 'red' }}"> to apple</router-link>
// 命名路由带查询参数query，地址栏变成/apple?color=red
<router-link :to="{name: 'applename', query: {color: 'red' }}"> to apple</router-link>
//直接路由带路由参数params，params 不生效，如果提供了 path，params 会被忽略
<router-link :to="{path: 'apple', params: { color: 'red' }}"> to apple</router-link>
// 命名路由带路由参数params，地址栏是/apple/red
<router-link :to="{name: 'applename', params: { color: 'red' }}"> to apple</router-link>

2、取值

　　获取query传参的方式

this.$route.query.code //123

　　获取param 传参的方式

this.$route.param.code //123

3、浏览器的路由展示情况

　　使用query传参的方式类似于get交互，传的参数在路由中显示，可以用作刷新后仍然存在参数。

　　使用param传参的方式类似于post交互，穿的参数不会出现在路由中，界面刷新后传参就不存在。

注意要点：query与param两种传参方式功能一直，都是传参，方式不一样，最大区别是传的参数是否能在路由中显示，能否刷新后仍然传参