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

2019-05-31 11:20:26

  初学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的时候,由于没有认真细致的看文档,导致在很多细小的坑里爬不上来,后来自己慢慢的走上正轨的时候,再去看文档,看到了很多原本可以避免的坑,想插死自己的心都有了!!

加油爬坑,共勉!


  • 2020-04-01 15:36:52

    CSS3中的transition属性详解

    transition: property duration timing-function delay transition属性是个复合属性,她包括以下几个子属性: transition-property :规定设置过渡效果的css属性名称 transition-duration :规定完成过渡效果需要多少秒或毫秒 transition-timing-function :指定过渡函数,规定速度效果的速度曲线 transition-delay :指定开始出现的延迟时间

  • 2020-04-02 17:02:25

    vue怎么能像jquery那样获得数据

    有时候我们需要获得动态的元素,但是我们没法直接用vue语法,vue一共了当前组件的对象,我们可以避免使用document.get...之类的。

  • 2020-04-02 21:38:15

    Nginx向ExpressJS转发真实IP地址

    由于服务器配置了Nginx的反向代理,在ExpressJS中无法获取到真实的IP地址。本文就介绍了如何配置Nginx以及ExpressJS使其可以显示用户的真实地址。

  • 2020-04-03 08:53:06

    使用自己的QQ邮箱发送自动发送邮件

    话说网上发送邮件的代码很多,但是我由于不细心,导致拿别人的代码发送邮件老是失败,今天就说说几个要注意的地方吧!!!

  • 2020-04-03 10:20:20

    Vue 项目性能优化

    Vue 框架通过数据双向绑定和虚拟 DOM 技术,帮我们处理了前端开发中最脏最累的 DOM 操作部分, 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM;但 Vue 项目中仍然存在项目首屏优化、Webpack 编译配置优化等问题,所以我们仍然需要去关注 Vue 项目性能方面的优化,使项目具有更高效的性能、更好的用户体验。本文是作者通过实际项目的优化实践进行总结而来,希望读者读完本文,有一定的启发思考,从而对自己的项目进行优化起到帮助。本文内容分为以下三部分组成:

  • 2020-04-03 13:07:46

    flex布局与position:absolute/fixed的冲突问题

    导航栏内,平均分为四块,为了适配各种移动设备,使用了flex布局。 与此同时,产品经理要求:页面上滚越过封面图时,导航栏变为固定定位,浮在页面顶部。 拿到需求之后,思路就是先搞好布局,然后监听window.onscroll,当页面滚的距离大于封面图的时候,给ul加入position:fixed。