Vue中query和params的区别与编程式导航的结合应用

最新推荐文章于 2024-04-20 09:53:18 发布

广东话的蛇皇

最新推荐文章于 2024-04-20 09:53:18 发布

阅读量193

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43618136/article/details/109500811

版权

352 篇文章 1 订阅

订阅专栏

query和params的区别

在vue的组件之间传递数据时，因为不想url上面有?xx=yy的内容出现，所以选择params形式传递参数，正常跳转，好看又方便
问题出现了：突然在刷新跳转之后的页面的时候，页面的数据加载不出来了，仔细一看，原来是路由中携带的参数不见了!! 组件刷新还能导致路由的参数丢失。

常用于在做判断后动态导航到各个方向的逻辑页面


this.$router.push({
      name:'hello',
      query:{
          name:'word',
          age:'11'
     }
})


this.queryId = this.$route.query.queryId

query传递参数不会出现路参数丢失的情况，所以不需要做其他的配置，不过缺点就是参数会拼接在url后面: url?xx=yy 这种方式来传递参数，会暴露参数，并且url也有字符上限限制


this.$router.push({
      name:'hello',
      params:{
          name:'word',
          age:'11'
     }
})



this.age = this.$route.params.age;

params传递参数是将参数放在route对象中，没有放在url后面，但是会有一个问题，在跳转之后的页面中刷新的时候，会导致当前路由中保存的params的参数丢失

使用params传递参数，参数没有像query那样，拼接在url后面，所以刷新的时候会出现数据丢失，则无法获取到数据

有两种方式可以解决：

1.使用sessionStorage、localStorage

sessionStorage、localStorage根据具体的场景来选择，保存到里面的数据不会在刷新下的时候丢失，不过在移动端，使用微信悬浮窗的时候，部分安卓机型的sessionStorage中的数据会丢失

使用params中的路由匹配

使用方式: 在router.js，即匹配路由规则的位置，加上占位符即可

{
  path: '/index/:num/:name',
  name: 'index',
  component: Index
}

params中的参数名称需要和占位符的名称一致即可

获取参数，还是和获取params中参数一致：this.$route.params.name

这样的话，参数就会出现在url中，格式为：url/num/name，这种方式将参数放在url上，刷新的时候才不会丢失数据。

解决办法：使用JSON传参

1.传参

this.$router.push({ name: ‘user’, query: { user: JSON.stringify(‘XXX’ )} })

2.取参

JSON.parse(this.$route.query.user)；

关注