当前位置 博文首页 > 文章内容

    vue 路由传参 params 与 query两种方式的区别

    作者: 栏目:未分类 时间:2020-09-22 9:00:41

    本站于2023年9月4日。收到“大连君*****咨询有限公司”通知
    说我们IIS7站长博客,有一篇博文用了他们的图片。
    要求我们给他们一张图片6000元。要不然法院告我们

    为避免不必要的麻烦,IIS7站长博客,全站内容图片下架、并积极应诉
    博文内容全部不再显示,请需要相关资讯的站长朋友到必应搜索。谢谢!

    另祝:版权碰瓷诈骗团伙,早日弃暗投明。

    相关新闻:借版权之名、行诈骗之实,周某因犯诈骗罪被判处有期徒刑十一年六个月

    叹!百花齐放的时代,渐行渐远!



      初学vue的时候,不知道如何在方法中跳转界面并传参,百度过后,了解到两种方式,params 与 query。然后,错误就这么来了:

       router文件下index.js里面,是这么定义路由的:

    {
          path:"/detail",
    name:"detail",
    component:home }

      我想用params来传参,是这么写的,嗯~

    复制代码

    this.$router.push({
     path:"/detail",
     params:{
     name:'nameValue',
     code:10011
     }
    });

    复制代码

      结果可想而知,接收参数的时候:

    this.$route.params.code     //undefined

      这是因为,params只能用name来引入路由,下面是正确的写法:

    复制代码
    this.$router.push({
       name:"detail",
       params:{
        name:'nameValue',
        code:10011
     }
    });
    复制代码

    这回就对了,可以直接拿到传递过来的参数nameValue了。

    说完了我的犯傻,下面整理一下这两者的差别:

    1、用法上的

      刚才已经说了,query要用path来引入,params要用name来引入,接收参数都是类似的,分别是this.$route.query.name和this.$route.params.name。

    注意接收参数的时候,已经是$route而不是$router了哦!!

    2、展示上的

      query更加类似于我们ajax中get传参,params则类似于post,说的再简单一点,前者在浏览器地址栏中显示参数,后者则不显示

    query:        

    params:    

     

    总结:刚学vue的时候,由于没有认真细致的看文档,导致在很多细小的坑里爬不上来,后来自己慢慢的走上正轨的时候,再去看文档,看到了很多原本可以避免的坑,想插死自己的心都有了!!

    加油爬坑,共勉!

    【转载】https://www.cnblogs.com/lulianlian/p/7682790.html