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 相关文章推荐
利用webqq协议使用python登录qq发消息源码参考
Apr 08 Javascript
javascript中常用编程知识
Apr 08 Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
Jul 10 Javascript
实例详解angularjs和ajax的结合使用
Oct 22 Javascript
浅析JavaScript中var that=this
Feb 17 Javascript
Angular中ng-bind和ng-model的区别实例详解
Apr 10 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
Oct 12 Javascript
微信小程序使用template标签实现五星评分功能
Nov 03 Javascript
vue elementUI使用tabs与导航栏联动
Jun 21 Javascript
layUI实现前端分页和后端分页
Jul 27 Javascript
用Golang运行JavaScript的实现示例
Nov 25 Javascript
autojs 蚂蚁森林能量自动拾取即给指定好友浇水的实现方法
May 03 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
PHP脚本数据库功能详解(下)
2006/10/09 PHP
PHP文件读写操作之文件读取方法详解
2011/01/13 PHP
php中的四舍五入函数代码(floor函数、ceil函数、round与intval)
2014/07/14 PHP
PHP编译安装中遇到的两个错误和解决方法
2014/08/20 PHP
腾讯微博提示missing parameter errorcode 102 错误的解决方法
2014/12/22 PHP
PHP中Closure类的使用方法及详解
2015/10/09 PHP
PHP CURL post数据报错 failed creating formpost data
2016/10/16 PHP
基于yaf框架和uploadify插件,做的一个导入excel文件,查看并保存数据的功能
2017/01/24 PHP
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
2011/03/28 Javascript
JQUERY的属性选择符和自定义选择符使用方法(二)
2011/04/07 Javascript
jquery一般方法介绍 入门参考
2011/06/21 Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
2014/09/23 Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
2014/10/11 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
2015/03/03 Javascript
你一定会收藏的Nodejs代码片段
2016/02/04 NodeJs
JavaScript代码性能优化总结(推荐)
2016/05/16 Javascript
AngularJS上拉加载问题解决方法
2016/05/23 Javascript
浅谈JS使用[ ]来访问对象属性
2016/09/21 Javascript
微信小程序 腾讯地图SDK 获取当前地址实现解析
2019/08/12 Javascript
layui layer select 选择被遮挡的解决方法
2019/09/21 Javascript
vue全屏事件开发详解
2020/06/17 Javascript
Python常用正则表达式符号浅析
2014/08/13 Python
通过代码实例展示Python中列表生成式的用法
2015/03/31 Python
django使用图片延时加载引起后台404错误
2017/04/18 Python
python判断字符串是否是json格式方法分享
2017/11/07 Python
使用python实现BLAST
2018/02/12 Python
python scp 批量同步文件的实现方法
2019/01/03 Python
python+numpy按行求一个二维数组的最大值方法
2019/07/09 Python
python 通过视频url获取视频的宽高方式
2019/12/10 Python
在keras中model.fit_generator()和model.fit()的区别说明
2020/06/17 Python
e路東瀛(JAPANiCAN)香港:日本旅游、日本酒店和温泉旅馆预订
2018/11/21 全球购物
初中地理教学反思
2014/01/11 职场文书
2014年公司植树节活动方案
2014/03/04 职场文书
年度评优评先方案
2014/06/03 职场文书
弘扬焦裕禄精神践行三严三实心得体会
2014/10/13 职场文书
校长师德表现自我评价
2015/03/04 职场文书