位置: 编程技术 - 正文

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

  • 固定资产待抵扣进项税
  • 固定资产原值增加后折旧年限变吗
  • 计提本月短期借款利息是权责发生制吗
  • 公司公积金缴纳比例一般来说是多少?
  • 超过开票金额不能开票?
  • 税票百分之十三怎么算
  • 企业所得税计提表模板
  • 建筑企业小规模纳税人升为一般纳税人条件
  • 房屋租赁收入如何征税?
  • 没有发票不能税前扣除,所以年底结账前需要检查
  • 房地产税和物业税
  • 冲减产品成本会计分录
  • 广告制作需要交文化建设费吗
  • 营业收入不开发票
  • 在杂志上发表论文
  • 税务系统勾了为什么还能认证?
  • 房地产企业自行开发的房地产项目
  • 如何确定合并报表的范围简答题
  • 其他资本公积如何花掉
  • 房租收入如何结转成本
  • 形式发票需要报关吗
  • 光伏发电项目发电户是否可以享受小规模优惠政策
  • 清理缓存网页电脑
  • 独生子女父母有意外险吗
  • linux命令有啥用
  • window10怎么禁用系统弹窗
  • PHP:curl_multi_exec()的用法_cURL函数
  • 非经营业务
  • 出售短期债券投资发生的净损失计入哪里
  • 材料费可抵扣进项税计算
  • 最贵的冰箱是多少钱
  • 企业汇算清缴后发现有多计提的成本
  • 技术转让费会计处理
  • 支付投资款怎么做账
  • 作废发票需要拿回执单吗
  • php编译器与集成环境怎么安装
  • 模型论文是什么类型
  • php实用教程
  • 员工预支款计入什么科目
  • 缴纳残保金的计税依据是什么
  • 2022最好用的港澳台电视直播
  • rabbitmq中文手册
  • 财务报表中的应收款项包括哪些
  • 机动车统一发票怎么开
  • 如何计算保费合同未规定加成比例
  • 主营业务收入如何做分录
  • 以前年度多记成本费用税前扣除,今年要怎么做分录冲销
  • 运费开什么发票
  • 备用金预期有什么影响
  • 应交税金减免税科目
  • 可以自行开具增值税专用发票的行业有哪些
  • 合资公司政策
  • 什么是成本费用,什么是经营成本
  • 创办小企业如何起步
  • 数据库访问机制
  • Windows下MySQL 5.7无法启动的解决方法
  • 如何删除win10系统
  • centos7+
  • freebsd软件包
  • windows提升性能
  • centos mtr
  • win7更新和安全在哪里
  • win7系统如何提升开关机速度
  • mac 怎么复制文件
  • hppusg.exe
  • 错误代码0x8007007B
  • win10ldac怎么开启
  • opengl es api
  • node.js安装教程详细
  • andriod 控件
  • win10 putty
  • vb中chr$(13)是什么意思
  • node.js怎么创建js文件
  • jquery中有几种方法可以来设置和获取样式
  • python3 functools
  • 厂房出租开增值税专用发票
  • 2020年海南个人所得税新规定
  • 福州灵活就业社保缴费2024年多少钱
  • 2021年福利彩票47期
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设