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模拟的QQ面板上的多级可展开的菜单
Oct 10 Javascript
Javascript表达式中连续的 && 和 || 之赋值区别
Oct 17 Javascript
JavaScript中判断对象类型的几种方法总结
Nov 11 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
Mar 14 Javascript
JavaScript模拟重力状态下抛物运动的方法
Mar 03 Javascript
Javascript小技能总结(推荐)
Jun 02 Javascript
JS中事件冒泡和事件捕获介绍
Dec 13 Javascript
vue后台管理之动态加载路由的方法
Aug 13 Javascript
浅谈webpack devtool里的7种SourceMap模式
Jan 14 Javascript
js实现录音上传功能
Nov 22 Javascript
微信小程序跨页面数据传递事件响应实现过程解析
Dec 19 Javascript
vue3.0实现插件封装
Dec 14 Vue.js
带你使用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
mysql建立外键
2006/11/25 PHP
PHP新手用的Insert和Update语句构造类
2012/03/31 PHP
php在数据库抽象层简单使用PDO的方法
2015/11/03 PHP
PHP中的empty、isset、isnull的区别与使用实例
2019/03/22 PHP
Ctrl+Enter提交内容信息
2006/06/26 Javascript
javascript编程起步(第二课)
2007/02/27 Javascript
使用jQuery jqPlot插件绘制柱状图
2014/12/18 Javascript
详解JavaScript的表达式与运算符
2015/11/30 Javascript
AngularJS使用angular-formly进行表单验证
2015/12/27 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
2016/03/07 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
2016/05/05 Javascript
AngularJS入门教程之过滤器用法示例
2016/11/02 Javascript
JavaScript微信定位功能实现方法
2016/11/29 Javascript
js实现随机点名小功能
2017/08/17 Javascript
详解Angular4 路由设置相关
2017/08/26 Javascript
Vue.js与 ASP.NET Core 服务端渲染功能整合
2017/11/16 Javascript
react-native封装插件swiper的使用方法
2018/03/20 Javascript
Python创建系统目录的方法
2015/03/11 Python
python嵌套字典比较值与取值的实现示例
2017/11/03 Python
python调用百度语音识别实现大音频文件语音识别功能
2018/08/30 Python
python 使用 requests 模块发送http请求 的方法
2018/12/09 Python
django用户登录验证的完整示例代码
2019/07/21 Python
python3 下载网络图片代码实例
2019/08/27 Python
python3发送request请求及查看返回结果实例
2020/04/30 Python
Python提取视频中图片的示例(按帧、按秒)
2020/10/22 Python
澳大利亚领先的运动鞋商店:Hype DC
2018/03/31 全球购物
公司行政经理岗位职责
2013/12/24 职场文书
大学毕业生求职自荐信
2014/02/20 职场文书
颁奖晚会主持词
2014/03/25 职场文书
作文评语集锦大全
2014/04/23 职场文书
啤酒节策划方案
2014/05/28 职场文书
企业法人代表任命书
2014/06/06 职场文书
解除劳动合同协议书范本2014
2014/09/25 职场文书
试了下Golang实现try catch的方法
2021/07/01 Golang
win11如何查看端口是否被占用? Win11查看端口是否占用的技巧
2022/04/05 数码科技
vmware虚拟机打不开vmx文件怎么办 ?vmware虚拟机vmx文件打开方法
2022/04/08 数码科技