vue 路由跳转 带参数
我同事经常说我太懒了,喜欢复制不喜欢自己动手写东西,我也才发现这个问题,现在都是能自己写就自己写,除非特们着急的时候,哈哈哈哈
最近学vue,虽然做了两个小项目了,发但我还是小白中的姜太白,白的彻底
首先我要跳转到list里面,这是router.js的配置
跳转有两种方法
router-link
1、 可以用path跳转,path的值和router.js定义的path相同
<router-link :to="{path:'/list',query:{id:1,name:2}}">点击跳转</router-link>
2、可以用name跳转,name的值必须和router.js定义的name相同
<router-link :to="{name:'List',query:{id:1,name:2}}">点击跳转</router-link>
query后面是参数,具体跳转是这样
另一个页面接受数据用
this.$route.query //打印输出 {id:"1",name:"2"}
用name 的时候 query可以换成是params,这样的参数不会在url中显示出来,类似与post请求,接收数据用
this.$route.params //打印输出 {id:"1",name:"2"}
this.$router.push()
1、用path跳转,path的值和router.js定义的path相同
this.$router.push({path:'/list',query:{id:1,name:2}})
2、用name跳转,name的值必须和router.js定义的name相同
this.$router.push({ name:"List",query:{ id:1,name:2}})
query后面也是参数,路由是这样的
另一个页面接受数据用
this.$route.query //打印输出 {id:"1",name:"2"}
用name 的时候 query可以换成是params,这样的参数不会在url中显示出来,类似与post请求,接收数据用
this.$route.params //打印输出 {id:"1",name:"2"}
综上所述,就是用path的时候,传参只能用query,但是用name的时候,可以用query,可以用params,而且用params还比较安全,所以建议平时用name跳转呀
大晚上的终于补完了,看脱口秀大会啦,哈哈哈哈哈
希望自己30岁还能在这个行业混下去,加油💪💪