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可以传数组或对象格式，大小不受限制