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两种传参方式功能一直,都是传参,方式不一样,最大区别是传的参数是否能在路由中显示,能否刷新后仍然传参