[JavaScript知识库]this.$route.params和this.$route.query的区别

Vue路由传参的区别

this.$route.params和this.$route.query的区别

1.相同点 都可以用来传参数，获取参数

eg：传参
    this.$router.push({
        path: '/path',
        query: {
            id: id,
         }
    }
    this.$router.push({
        path: '/path',
        params: {
            id: id,
         }
    }

取参
    this.$route.query.id
    this.$route.params.id

2.不同点：
使用query传参url中显示参数，刷新路由跳转页面参数不消失，依旧在url上
使用params传参url中不显示参数，刷新路由跳转页面参数消失

eg：
  query:  http://127.0.0.1/path?id='123'
  params: http://127.0.0.1/path

3.使用时需要注意点：
如果是query，进行传参，传入的是对象的时候， 页面进入时能正确获取到此对象， 但当刷新页面时，此参数值成了’[object object]'， 原因： String({})为"[object Object]" ， 没错将对象转成了字符串，可以用JSON格式来解决

 //传参
this.$router.push({
          path: "/path",
          query: { data:JSON.stringify(data)} 
        });
 
//取值
let data=JSON.parse(this.$route.query.data);