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岁还能在这个行业混下去,加油💪💪

 

posted @ 2020-07-28 21:17  西贝小小凤  阅读(623)  评论(2编辑  收藏  举报