params传参和query传参，params参数容易丢失

最新推荐文章于 2024-12-24 16:34:39 发布

原创最新推荐文章于 2024-12-24 16:34:39 发布 · 754 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #java

博客探讨了前端路由中params和query参数的区别。params传递的参数不会显示在URL上，但刷新页面会丢失；而query参数显示在URL且刷新不丢失。params需配合name跳转，未提供会致跳转失败。query则更灵活。结论是若要隐藏参数须用params，否则考虑其他策略。

一、顺便提一嘴$router和$route的区别

//$router : 是路由操作对象，只写对象
//$route : 路由信息对象，只读对象


//操作 路由跳转
this.$router.push({
      name:'hello',
      params:{
          name:'word',
          age:'11'
     }
})

//读取 路由参数接收
this.name = this.$route.params.name;
this.age = this.$route.params.age;

二、params和query的区别

使用params传参，只能使用name跳转，参数不显示在url上面，但是刷新页面参数丢失：

//params传参 使用name
this.$router.push({
  name:'second',
  params: {
    id:'1',
     name: '2'
  }
})

//params接收参数
this.id = this.$route.params.id ;
this.name = this.$route.params.name ;

修改路由后，参数不丢失，但是参数会显示在url上面，如：xxxx/xx/1/2。

如果path上加了参数:id/:name，但是跳转的时候又没有传这个参数，会导致跳转失败或者页面会没有内容。

//路由
//把参数名写在url上
{
    path: '/second/:id/:name',
    name: 'second',
    component: () => import('@/view/second')
}

用query传参，可以使用path，也可以使用name。不存在刷新页面参数丢失，参数也显示在url上面，如：xxxx/xx?id=1&name=2

//query传参，使用name跳转
this.$router.push({
    name:'second',
    query: {
        id:'1',
        name: '2'
    }
})

//query传参，使用path跳转
this.$router.push({
    path:'second',
    query: {
        id:'1',
        name: '2'
    }
})

//query传参接收
this.queryName = this.$route.query.name;
this.queryId = this.$route.query.id;

总结：（仅代表个人意见）

要想刷新页面参数不丢失，只能在url上显示，params和query都可以传

如果想要url上不显示参数，只能用params，否则只能找其他办法了

原文链接：https://blog.youkuaiyun.com/mf_717714/article/details/81945218