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 相关文章推荐
javascript 面向对象的JavaScript类
May 04 Javascript
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
Jun 26 Javascript
jQuery中has()方法用法实例
Jan 06 Javascript
在JavaScript应用中使用RequireJS来实现延迟加载
Jul 01 Javascript
jquery实现简单的全选和反选功能
Jan 02 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
Dec 20 Javascript
javascript实现文字无缝滚动
Dec 27 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
Jul 09 Javascript
详解Vue学习笔记入门篇之组件的内容分发(slot)
Jul 17 Javascript
JS实现快速比较两个字符串中包含有相同数字的方法
Sep 11 Javascript
如何利用vue实现波谱拟合详解
Nov 05 Javascript
jQuery实现查看图片功能
Dec 01 jQuery
带你使用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
php中使用DOM类读取XML文件的实现代码
2011/12/14 PHP
php提示Call-time pass-by-reference has been deprecated in的解决方法[已测]
2012/05/06 PHP
php+memcache实现的网站在线人数统计代码
2014/07/04 PHP
PHP中header函数的用法及其注意事项详解
2016/06/13 PHP
关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
2009/08/28 Javascript
Jquery 表单取值赋值的一些基本操作
2009/10/11 Javascript
一个JavaScript的求爱小特效
2014/05/09 Javascript
JavaScript实现的使用键盘控制人物走动实例
2014/08/27 Javascript
JavaScript语言对Unicode字符集的支持详解
2014/12/30 Javascript
Jquery 实现grid绑定模板
2015/01/28 Javascript
js实现input框文字动态变换显示效果
2015/08/19 Javascript
jQuery事件委托之Safari
2016/07/05 Javascript
AngularJS 执行流程详细介绍
2016/08/18 Javascript
jquery插件ContextMenu设置右键菜单
2017/03/13 Javascript
深入理解Angular.JS中的Scope继承
2017/06/04 Javascript
微信小程序后台解密用户数据实例详解
2017/06/28 Javascript
JavaScript使用Math.random()生成简单的验证码
2019/01/21 Javascript
vue图片上传本地预览组件使用详解
2019/02/20 Javascript
详解js实时获取并显示当前时间的方法
2019/05/10 Javascript
python笔记(1) 关于我们应不应该继续学习python
2012/10/24 Python
Python内置数据类型详解
2014/08/18 Python
Python比较配置文件的方法实例详解
2019/06/06 Python
Python中的正则表达式与JSON数据交换格式
2019/07/03 Python
pygame库实现移动底座弹球小游戏
2020/04/14 Python
django 实现简单的插入视频
2020/04/07 Python
python中@contextmanager实例用法
2021/02/07 Python
python绘图模块之利用turtle画图
2021/02/12 Python
25个CSS3动画按钮和菜单教程分享
2012/10/03 HTML / CSS
Wallis官网:英国女装零售商
2020/01/21 全球购物
美国用餐电影院:Alamo Drafthouse Cinema
2020/01/23 全球购物
党员自我剖析材料范文
2014/10/06 职场文书
高中团支书竞选稿
2015/11/21 职场文书
2019个人工作计划书的格式及范文!
2019/07/04 职场文书
Python实战之OpenCV实现猫脸检测
2021/06/26 Python
DE1107机评
2022/04/05 无线电
windows server2016安装oracle 11g的图文教程
2022/07/15 Servers