Vue路由传参

一.使用query进行传参

query方式,必须定义path属性,通过query传参,然后在目标页面通过this.$route.query来接受参数。

 1.绑定一个点击@click事件并把id传过去           

<van-card
   v-for="item in appIndex_list"
   :key="item.teacher_id"
   @click="goList(item.id)"
 />

 也可以使用router-link标签 


       <router-link :to="{path:'/List',query:{_id:item.id}}">
               <van-card
                 v-for="item in appIndex_list"
                 :key="item.id"
                 :desc="item.teacher_name"
                 />
       </router-link>

 

2.在methods方法中通过this.$router.push传递

    methods:{
         goList(_id){
            this.$router.push({path:'List',query:{_id:item.id}})
         }
     }

3.在List页面中接收

        data(){
            return{
                _id:""
            }
        },
        mounted(){
            this._id= this.$route.query.id
        },

注意接收参数的时候,是route而不是router! 

二.使用params进行传参

1.绑定一个点击@click事件并把id传过去   

<van-card
   v-for="item in appIndex_list"
   :key="item.teacher_id"
   @click="goList(item.id)"
 />

2.在methods方法中通过this.$router.push传递  

 methods:{
         goList(_id){
            this.$router.push({name:'List',params:{_id:item.id}})
         }
     }

 3.在List页面中接收

  data(){
            return{
                _id:""
            }
        },
        mounted(){
            this._id= this.$route.params.id
        },

注意接收参数的时候,是route而不是router!

三.query和params的区别

query:

      query要用path来引入

       通过this.$router.push()传递 通过 this.$route.query.id 来接收

       注意:query只能传字符串,不是字符串格式的,它将转化为字符串格式

params:

        params要用name来引入

        通过 this.$router.push()传递 ,通过 this.$route.params.id来接收

        注意:params可以传数组或对象格式,大小不受限制

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值