vue路由params、query传参和取值以及两者区别

params传值

params传值必须有name属性，也可以有path属性，不然取不到值。

this.$route.push({
    name:'home',
    path:'/home',
    params: {
        message: "",
        data: {}
    }
})

params取值

let message = this.$route.params.message;
let data = this.$route.params.data;

query传值

this.$route.push({
    path:'/home',
    query: {
        message: "",
        data: {}
    }
})

query取值

let message = this.$route.query.message;
let data = this.$route.query.data;

query和params的区别

• this.$router.push() 方法中，params传值必须有name属性，也可以有path属性，不然取不到值。
• this.$router.push() 方法中，query传值与name和path属性无必然联系，和其中哪个属性搭配都可以传值。
• params传值在url上是看不到传递的参数的。
• query传值在url上能看到传递的参数，如：http://192.168.187.20:8080/#/dashboard/?data=hello
• 通过query传值，跳到另一个页面的时候，刷新还是可以取到传递过来的值，而params就会重置，取不到值。