vue-router中query与params区别

query和params两者都是在Vue路由中传参。

用法: query用path来引入,params只能用name来传递,不能使用path 

展示效果:query更像ajax中get请求(会在地址栏显示参数),而params更像post方式传递(不会在地址栏显示参数)

query方式传参和接收参数

//传参
this.$router.push({
        path:'/xxx'
        query:{
          id:id
        }
 })
 //接收参数
this.$route.query.id

传参是this.$router,接收参数是this.$route

$router为VueRouter实例。想要导航跳不同URL可以使用$this.router的方法(push、go、replace)去切换路由

$route是当前router跳转对象。里面可以获取name、path、query、params等相关信息

params方式传参和接收参数

//传参: 
this.$router.push({
        name:'xxx'
        params:{
          id:id
        }
      })
  
//接收参数:
this.$route.params.id

params传参里面只能是name,不能是path

params只能用name来引入路由,如果这里写成了path,接收参数页面会是undefined

原文地址:https://www.cnblogs.com/theblogs/p/10462155.html