位置: 编程技术 - 正文

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详解)

  • 增值税抵扣了还能作废吗
  • 小微企业所得税税率
  • 2021年9月个税申报截止时间
  • 减免企业所得税怎么算
  • 增值税调整收入税额差额怎么写
  • 社保漏缴1个月怎么补缴
  • 月末进项税额转出科目需要结转吗
  • 金税盘全额抵扣申报流程
  • 资产减值准备会计科目编码
  • 营业成本利润率是指
  • 工程未竣工如何结算
  • 把公司的设备弄坏了怎么办
  • 个人独资企业法人承担什么责任
  • 跨年成本发票红冲怎么做会计分录
  • 公司拖欠工资还要继续工作吗?
  • 国家税务总局关于取消增值税扣税凭证
  • 对方发票丢失开什么证明
  • 药品底价高开票什么意思
  • 公司租入农民的房子好吗
  • 票据结算包括哪几项
  • 进口报关单保费
  • 为什么win10系统更新不了
  • 营改增后一般纳税人税率
  • 去年年终奖
  • win10右键个性化显示该文件
  • ct.dll
  • 用应付票据付应付账款
  • oss对象储存的副本储存原则
  • 报错专业了可不可以改
  • 光下的村庄环境描写
  • 前端image
  • yii框架入门
  • yii2.0框架
  • 应收账款未计提怎么处理
  • python单链表的创建
  • 长期待摊费用账务
  • 车辆过完户保险还能下浮吗
  • 企业所得税的计算公式三种
  • 本年利润在借方代表亏损吗
  • 小规模纳税人代销商品增值税如何计算
  • 服务费的发票税率是多少
  • 深入理解计算机系统
  • sql函数判断一个值是否是数字
  • 财产租赁合同印花税申报期限
  • 实收资本现金入账怎么办
  • 出口退税项目
  • 既有从价又有从租如何计算房产税
  • 公司账户没有钱怎么发工资
  • 存货类明细分类账一般采用
  • 租赁财产的残值处理
  • 盘盈的固定资产怎么处理
  • 零申报必须会计吗?自己可以操作吗
  • 年初建账考虑要点
  • 年末结转的会计核算过程
  • 捐赠支出表怎么填
  • sql有哪些语句
  • mysql命令导入
  • mysql的基本sql语句
  • win8系统打开软件很慢
  • win10预览版选哪个
  • 直接内存访问控制器是什么
  • fedora 10
  • 苹果mac双系统好不好
  • vm虚拟机中的浏览器在哪
  • php.exe是什么
  • win7关闭uac是什么意思
  • win8开机进入开始界面
  • 如何使用jquery插件
  • 用Python设计一个游戏
  • 基于单片机的毕业设计题目
  • 全面解析A型天秤座男
  • jquery手册手机版
  • jquery如何加背景图片
  • javascript面向对象吗
  • javascript教程
  • javastudio
  • 江苏发票真伪查询网站
  • 企业所得税改革
  • 腾讯 短信服务
  • 浙江省打造先行省
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设