位置: 编程技术 - 正文

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

  • 黄金销售免税
  • 成本核算需要哪些基础工作
  • 从企业分红所得税怎么算
  • 出让土地缴纳的契税怎么账务处理
  • 税务局三代手续费政策
  • 市场运营部门工作职责
  • 公司没有业务了 可以办理停业
  • 事业单位职工福利费范围有哪些
  • 企业所得税25%怎么这么高
  • 房地产企业交房时如何开票
  • 银行定期存款利率计算
  • 生产企业出口退税流程怎么操作
  • 小微企业减免税如何算
  • 营改增后房地产开发税费一览表
  • 融资租赁收到租金不确认收入
  • 所得税季报季末从业人数怎么填
  • 收到股息红利免征增值税
  • 服务费发生退回怎么处理
  • 公司单位员工餐费怎么算
  • 中期支付内容包括
  • 预收销货款属于负债吗
  • 非金融类企业的货币资金主要包括哪些内容?
  • 股东实缴出资的证明
  • fdisk分区工具怎么用
  • 固定资产的主要特征有哪些
  • 游戏出现d3d11lostdevice
  • php公众号
  • 地税增值税税率是多少
  • js监听hover
  • 个人出租商用房个人所得税
  • 企业为员工购买
  • php保存session
  • php跨域提交表单
  • 银行流水要去哪里打
  • 端午节要给钱吗
  • 简易记账和复式记账
  • 让渡资产使用权收入什么意思
  • 研发增值税税率怎么算
  • 会计期末业务有哪些?
  • 即征即退收入不能税前扣除
  • 车间管理人员差旅费
  • 交易性金融资产的入账价值
  • 投资性房地产成本法账务处理
  • 实收资本实务处理办法
  • 应缴财政专户款年末有余额吗
  • 土地使用权如何取得
  • 进项不能从销项抵扣
  • 土地使用权属于无形资产吗
  • 小规模纳税人开专票税率是多少?
  • 税务稽查其他应付款
  • 党建经费可以购买什么
  • 职工教育经费如何列支
  • 企业和债权人有什么利益冲突
  • 微软推出新系统发布会
  • Win10系统中怎么将文件夹进行压缩
  • xp系统的ie浏览器无法打开该网页怎么办
  • 建立iis
  • windows8.
  • ,linux
  • xp系统个性化
  • xp系统与win7系统的电脑怎么组成局域网
  • centos挂载lvm硬盘
  • 注意 Win/WP8.1开发者账户现已迁移到全新Win10开发者中心仪表盘
  • linux如何kill进程
  • win8系统ie浏览器最高多少
  • 服务器不支持是什么意思
  • windows7输入
  • javascript编程技术
  • bootstrap怎么用
  • android点击图片跳转页面
  • glviewport超出屏幕范围
  • opengl绘制点线面
  • 自动化测试读写题答案
  • 安卓手机如何打开.icon文件
  • jquery?
  • python数据结构与算法题库
  • python组合运算
  • 一款简单的网络版多媒体课件制作软件是什么
  • 中国税务社保缴费app下载
  • 普洱房产管理局官网
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设