vue 获取url里参数的两种方法小结


Posted in Javascript onNovember 12, 2020

我就废话不多说了,大家还是直接看代码吧~

第一种:

const query = Qs.parse(location.search.substring(1))

let passport = query.passport;

第二种:

var query=this.$route.query;

let lat = query.lat;

补充知识:Vue通过query获取路由参数

现在来讲Vue通过query获取路由参数

vue 获取url里参数的两种方法小结

vue 获取url里参数的两种方法小结

vue 获取url里参数的两种方法小结

可以看见com1组件里的路由参数为 name=zhangsan&job=teacher

使用 this.$route.query 来获取路由参数

现在就是利用query直接获取路由参数并且以对象的形式展现出来

vue 获取url里参数的两种方法小结

点击按钮之后,查看控制台,可以看见:

vue 获取url里参数的两种方法小结

vue 获取url里参数的两种方法小结

路由参数以对象的形式展现了出来

但是query获取的参数要注意一个问题:不可以直接渲染 query的路由参数对象,不然会报错

比如:我想在页面上直接打印query获取的路由参数对象

vue 获取url里参数的两种方法小结

会报这样的错误:

vue 获取url里参数的两种方法小结

error in render 说明这是渲染错误

虽然不能渲染query获取的路由参数对象,但是可以渲染query获取的路由参数对象的属性值

例如:

vue 获取url里参数的两种方法小结

成功渲染

vue 获取url里参数的两种方法小结

控制台也不报错。

以上这篇vue 获取url里参数的两种方法小结就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 表单验证方法(实用)
Apr 28 Javascript
jQuery div层的放大与缩小简单实现代码
Mar 28 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
May 03 Javascript
JavaScript  event对象整理及详细介绍
Oct 10 Javascript
jquery+css3问卷答题卡翻页动画效果示例
Oct 26 Javascript
angular+bootstrap的双向数据绑定实例
Mar 03 Javascript
Angular4学习笔记之新建项目的方法
Jul 18 Javascript
vue组件的写法汇总
Apr 12 Javascript
详解vue 自定义marquee无缝滚动组件
Apr 09 Javascript
图解javascript作用域链
May 27 Javascript
vue中的使用token的方法示例
Mar 10 Javascript
vue实现简单计算商品价格
Sep 14 Javascript
带你使用webpack快速构建web项目的方法
Nov 12 #Javascript
vue项目实现减少app.js和vender.js的体积操作
Nov 12 #Javascript
详解vue 组件的实现原理
Nov 12 #Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
Nov 12 #Javascript
vue 图片裁剪上传组件的实现
Nov 12 #Javascript
js前端传json后台接收‘‘被转为quot的问题解决
Nov 12 #Javascript
使用Vant完成DatetimePicker 日期的选择器操作
Nov 12 #Javascript
You might like
在任意字符集下正常显示网页的方法二(续)
2007/04/01 PHP
PHP比你想象的好得多
2014/11/27 PHP
ThinkPHP通过AJAX返回JSON的两种实现方法
2014/12/18 PHP
jquery 必填项判断表单是否为空的方法
2008/09/14 Javascript
js修改input的type属性及浏览器兼容问题探讨与解决
2013/01/23 Javascript
javascript简单事件处理和with用法介绍
2013/09/16 Javascript
js中事件的处理与浏览器对象示例介绍
2013/11/29 Javascript
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
2014/10/17 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
2015/03/09 Javascript
JavaScript编写推箱子游戏
2015/07/07 Javascript
jquery实现删除一个元素后面的所有元素功能
2015/12/21 Javascript
Js实现简单的小球运动特效
2016/02/18 Javascript
jQuery的文档处理程序详解
2016/05/10 Javascript
一个仿微博登陆邮箱提示框js开发案例
2016/07/28 Javascript
node.js发送邮件email的方法详解
2017/01/06 Javascript
[03:37]2014DOTA2国际邀请赛 主赛事第一日胜者组TOPPLAY
2014/07/19 DOTA
[49:08]Secret vs VP 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python根据路径导入模块的方法
2014/09/30 Python
深入解析Python中的urllib2模块
2015/11/13 Python
python的else子句使用指南
2016/02/27 Python
Python 20行简单实现有道在线翻译的详解
2019/05/15 Python
python绘制雪景图
2019/12/16 Python
python cv2在验证码识别中应用实例解析
2019/12/25 Python
Numpy中ndim、shape、dtype、astype的用法详解
2020/06/14 Python
python中pyplot基础图标函数整理
2020/11/10 Python
Clearly澳大利亚:购买眼镜、太阳镜和隐形眼镜
2018/04/26 全球购物
医学院四年学习生活的自我评价
2013/11/06 职场文书
幼儿师范毕业生自荐信
2013/11/09 职场文书
公司庆典邀请函范文
2014/01/13 职场文书
《奇妙的国际互联网》 教学反思
2014/02/25 职场文书
小学教师读书活动总结
2014/07/08 职场文书
2014年文秘工作总结
2014/11/25 职场文书
担保书范文
2015/01/20 职场文书
报名委托书
2015/01/29 职场文书
MBA推荐信怎么写
2015/03/25 职场文书
《天使的翅膀》读后感3篇
2019/12/20 职场文书