vue-router的query和params的区别

vue-router的query和params的区别

首先简单来说明一下$router和$route的区别

  • $router为VueRouter实例,想要导航到不同url,则使用$router.push方法
  • $route为当前router跳转对象,里面可以获取name、path、query、params等

params方式传参和接收参数

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

query方式传参和接收参数

不过query使用name来引入也可以传参,使用path也可以

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

params方式和query方式的区别

  • query方式生成的url为/xx?id=id,params方式生成的url为xx/id
  • params方式需要注意的是需要定义路由信息如:path: ‘/xx/:id’,这样才能进行携带参数跳转,否则url不会进行变化,并且再次刷新页面后参数会读取不到

选择哪个更好

看场景需求,一般我开发喜欢使用params方式方式,因为path定义,会存在嵌套路由比较复杂且不好维护,而name比较简洁而且更好维护。

    原文作者:余木
    原文地址: https://segmentfault.com/a/1190000017072101
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞