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树形控件脚本代码
Jul 24 Javascript
js写一个弹出层并锁屏效果实现代码
Dec 07 Javascript
JS判定是否原生方法
Jul 22 Javascript
深入理解JavaScript是如何实现继承的
Dec 12 Javascript
去除html代码里面的script正则方法
May 19 Javascript
JCrop+ajaxUpload 图像切割上传的实例代码
Jul 20 Javascript
Form表单按回车自动提交表单的实现方法
Nov 18 Javascript
关于jquery form表单序列化的注意事项详解
Aug 01 jQuery
vue-content-loader内容加载器的使用方法
Aug 05 Javascript
JS实现图片切换效果
Nov 17 Javascript
layui radio单选限制下一个radio单选的实例
Sep 03 Javascript
nuxt配置通过指定IP和端口访问的实现
Jan 08 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+MySQL实现无极限分类栏目的方法
2015/12/23 PHP
php微信开发之关注事件
2018/06/14 PHP
基于jquery的direction图片渐变动画效果
2010/05/24 Javascript
编写高效jQuery代码的4个原则和5个技巧
2014/04/24 Javascript
JavaScript实现文字与图片拖拽效果的方法
2015/02/16 Javascript
jQuery实现Select左右复制移动内容
2016/08/05 Javascript
javascript宿主对象之window.navigator详解
2016/09/07 Javascript
JS简单判断滚动条的滚动方向实现方法
2017/04/28 Javascript
Nodejs回调加超时限制两种实现方法
2017/06/09 NodeJs
AngularJS中下拉框的高级用法示例
2017/10/11 Javascript
详解http访问解析流程原理
2017/10/18 Javascript
微信小程序使用Promise简化回调
2018/02/06 Javascript
微信小程序点击view动态添加样式过程解析
2020/01/21 Javascript
为什么推荐使用JSX开发Vue3
2020/12/28 Vue.js
详解Python的Django框架中的模版相关知识
2015/07/15 Python
Python 中 list 的各项操作技巧
2017/04/13 Python
Python中super函数的用法
2017/11/17 Python
python pandas 对series和dataframe的重置索引reindex方法
2018/06/07 Python
python SQLAlchemy 中的Engine详解
2019/07/04 Python
win10下python2和python3共存问题解决方法
2019/12/23 Python
python 已知一个字符,在一个list中找出近似值或相似值实现模糊匹配
2020/02/29 Python
python使用Thread的setDaemon启动后台线程教程
2020/04/25 Python
opencv 图像礼帽和图像黑帽的实现
2020/07/07 Python
selenium3.0+python之环境搭建的方法步骤
2021/02/01 Python
浅析数据存储的三种方式 cookie sessionstorage localstorage 的异同
2020/06/04 HTML / CSS
Regatta官网:英国最受欢迎的户外服装和鞋类品牌
2019/05/01 全球购物
Notino希腊:购买香水和美容产品
2019/07/25 全球购物
Java如何支持I18N?
2016/10/31 面试题
2014年三八妇女节活动方案
2014/02/28 职场文书
政府班子四风问题整改措施
2014/10/04 职场文书
开展批评与自我批评发言稿
2014/10/16 职场文书
幼儿园感谢信
2015/01/21 职场文书
2015年教师党员公开承诺书
2015/01/22 职场文书
新学期新寄语,献给新生们!
2019/11/15 职场文书
Python安装使用Scrapy框架
2022/04/12 Python
Vscode中SSH插件如何远程连接Linux
2022/05/02 Servers