Vue中this.$route.params和this.$route.query的区别和使用

两个方法都用于页面跳转传递参数使用

1、this.$route.query的使用

A.传递参数页面
this.$router.push({
    path: '/monitor',//跳转的页面
    query:{
        id:id,//传递的参数
    }
}）
             
B.接收参数页面
this.$route.query.id
                  
C.页面URL携带显示参数
http://localhost:8080/#/monitor?id=1
                  
D.跳转的页面刷新时数据还会存在

2、this.$route.params的使用

A.传递参数页面
this.$router.push({
    name: 'monitor',//跳转的页面
    params:{
        id:id,//传递的参数
    }
}）
             
B.接收参数页面
this.$route.params.id
                  
C.页面URL携带不显示参数
http://localhost:8080/#/monitor
                  
D.跳转的页面刷新时数据不存在

总结：this.$route.query传递参数时页面的URL显示参数，跳转的页面刷新时数据还会存在；
$route.params传递参数时URL不显示参数，跳转的页面刷新时数据不存在。