vue的两种路由传值方式(params,query)

路由传值，取值(一个参数)

1、路由部分配置：如router.js页面，在需要取值的页面的路由上添加/:testid
{
    path:'/pUniversity/pUniversityInfo/:testid',    //添加/:testid
    component:pUniversityInfo
},
2、传值，在需要传值的页面(如列表页)
<li class="everyInfo" v-for="(item,index) in universityList" :key="index">
    <router-link :to="'/pUniversity/pUniversityInfo/'+item.testid" >   //这里通过这种方式传入id值，注意to需要v-bind绑定，另外注意 / 符号别少了
        <div class="infoImg"><img :src="item.pimage" /></div>
        <div class="infoName"><span>{{item.pname}}</span></div>
    </router-link>
</li>
3、取值，在需要取值的页面(如详情页)
data(){
    return{
        id:this.$route.params.testid    //注意这里是$route而不是$router
    }
},

路由传值取值(多个参数，params方式)

1、路由页面
{
    path:'/video/videoScreen',
    component:VideoScreen,
    name:'VideoScreen',   //params传多个参数必须要给路由命名，再通过命名方式跳转。
},
2、传值页面
methods:{
    postData(){
        this.$router.push({name:'VideoScreen',params:{cid:this.demoCid,sid:this.demoSid,eid:this.demoEid}})   //params传多个值，只能通过name命名方式跳转，不可通过path路径方式
    },
}
3、取值页面
data(){
    return{
        getData:this.$route.params   //取值
    }
}

丶丶丶【敲黑板】params通过路由name传值的方式有个缺点，就是在取值页面刷新后，传过来的值便被清空了。丶丶丶
4、上述问题解决办法：
在路由页面做如下改动
{
    path:'/video/videoScreen/:cid/:sid/:eid',    //这里在路由后面配置一下需要传的参数即可，这样参数就跟着路由被带过来，不会被清空了
    component:VideoScreen,
    name:'VideoScreen',  
},

路由传值取值(多个参数，query方式)

1、路由页面
{
    path:'/video/videoScreen',
    component:VideoScreen,
},
2、传值页面
methods:{
    postData(){
        this.$router.push({path:'/video/videoScreen',query:{cid:this.demoCid,sid:this.demoSid,eid:this.demoEid}})   //query传多个值，只能通过path路径方式跳转，不可通过name命名方式
    },
}
3、取值页面
data(){
    return{
        getData:this.$route.query//取值
    }
}

vue的两种路由传值方式(params,query)

原文：https://www.cnblogs.com/huihuihero/p/12159633.html