位置: 编程技术 - 正文

vue router使用query和params传参的使用和区别

编辑:rootadmin

推荐整理分享vue router使用query和params传参的使用和区别,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

写在前面:

传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题。有需要的朋友可以做一下参考,喜欢的可以点波赞,或者关注一下,希望可以帮到大家。

Vue router如何传参

params、query是什么?

params:/router1/:id ,/router1/,/router1/ ,这里的id叫做params

query:/router1&#;id= ,/router1&#;id= ,这里的id叫做query。

路由界面:

router.js:

路由设置这里,当你使用params方法传参的时候,要在路由后面加参数名,并且传参的时候,参数名要跟路由后面设置的参数名对应。使用query方法,就没有这种限制,直接在跳转里面用就可以。

注意:如果路由上面不写参数,也是可以传过去的,但不会在url上面显示出你的参数,并且当你跳到别的页面或者刷新页面的时候参数会丢失(如下图所示),那依赖这个参数的http请求或者其他操作就会失败。

注意看上面的路由参数,id这个参数是我们有设置在路由上面的,id2我没有设置在路由里面,所以刷新之后id2就不见了,在项目中,我们总不可能要求用户不能刷新吧。

组件1:

编程式导航跳转:

vue router使用query和params传参的使用和区别

上面的router-link传参,也可以使用router文档里面的编程式导航来跳转传参。

这两种传参效果是一模一样的,编程式导航,可以用来做判断跳转,比如是否授权,是否登录,等等状态,对此不太了解的小伙伴们,可以跳过这个编程式导航,以后再来看。

组件2:

传参还是比较简单的,按着上面组件的使用方法就可以成功传过去了。

提示:获取路由上面的参数,用的是$route,后面没有r。

params传参和query传参有什么区别:

1、用法上的

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

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

2、展示上的

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

query:

params:

3、params是路由的一部分,必须要有。query是拼接在url后面的参数,没有也没关系。

params一旦设置在路由,params就是路由的一部分,如果这个路由有params传参,但是在跳转的时候没有传这个参数,会导致跳转失败或者页面会没有内容。

比如:跳转/router1/:id

4、params、query不设置也可以传参,params不设置的时候,刷新页面或者返回参数会丢失,这一点的在上面说过了

后话:

本文到这里就结束了,写的不好的地方,请各位大佬们见谅。

标签: vue router使用query和params传参的使用和区别

本文链接地址:https://www.jiuchutong.com/biancheng/377380.html 转载请保留说明!

上一篇:vue+vue-validator 表单验证功能的实现代码

下一篇:使用Vue-Router 2实现路由功能实例详解(vue router详解)

  • 房地产开发企业资质等级有几个
  • 完税证明是可以抵扣吗
  • 金税四期对纳税的影响
  • 收付实现制有应收应付吗
  • 即征即退进项税额为哪些
  • 股权投资收回的账务处理
  • 其他应收款贷方余额表示什么
  • 净利润为什么要减折旧
  • 银行承兑汇票背书可以拆分
  • 初始余额录入时需要录入什么
  • 自己可以缴纳社保吗
  • 错误的累计折旧结转会计分录如何调整
  • 外地施工如何开发票
  • 契税印花税的会计分录怎么写
  • 固定资产当月入账下月计提折旧
  • 怎么从银行买承兑汇票
  • 纳税调减事项有
  • 企业所得税虚报成本多少属于犯罪
  • 多收账款怎么账务处理
  • 商品过期可以向商家索要赔偿吗
  • 中央空调 付款
  • 红字发票需要做什么科目
  • 房产税每次申报都要维护吗
  • 税控盘抵扣联附在哪里
  • 开普票时开票码怎么开
  • 产值指的是财务报表哪个数值
  • 政府收取的工程物资
  • 电子商务出纳的岗位职责
  • 防伪税控服务费减免文件
  • 营改增后房地产公司税种及税率
  • 转账支票到期了怎么兑现
  • 购进产品样品怎么做分录
  • win10 20h2更新后闪屏
  • 错误代码11-1114
  • win10专业版怎么改成家庭版
  • 成立非盈利组织的条件
  • 总公司人员的工资子公司可以发吗
  • php魔术方法的讲解与使用
  • 建筑行业有哪些岗位,从事的要求有哪些
  • 个体户对公账户的钱怎么取出来
  • 公司日常流水账
  • 旅客运输服务进项税额的计算公式
  • .net core中间件原理
  • element ui
  • 国税纳税申报表下载
  • 铁路运费的印花税进什么科目
  • 收到返利冲成本还是记收入
  • 农村合作社不报税会导致经营异常吗
  • 更改sql server数据库名
  • sql server触发器实例
  • 计提持有至到期债券投资的利息
  • 增值税红字发票怎么填开
  • 公司购买汽车如何抵成本
  • 递延税款科目怎样使用
  • 土地转让需要批准吗
  • 购买税控盘用银行抵扣吗
  • 实收资本主要包括哪些
  • 合伙 利润分配
  • 虚拟模块
  • 建筑业营改增后税务问题
  • 小规模纳税人购进税控设备如何抵扣
  • 著作权使用费收费标准
  • 建账时应注意的事项有
  • sql2000 sql2008
  • linux中磁盘分区
  • windows xp无法访问samba共享夹
  • 有没有类似window的免费软件
  • 华硕电脑升级win11
  • javascript中对象一般由什么组成
  • apache部署项目
  • jquery时间格式
  • 深入探讨换个说法怎么说
  • koa与node.js开发实战
  • 迅雷继续下载
  • 三角进攻怎么打
  • bootstrap steps
  • 国家减免的增值税怎么做账
  • 税收科研工作思路
  • 阿尔及利亚关税起征点查询
  • 广东省职称证书编号查询系统
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设