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 相关文章推荐
关于使用runtimeStyle属性问题讨论文章
Mar 08 Javascript
javascript iframe编程相关代码
Dec 28 Javascript
Jquery+JSon 无刷新分页实现代码
Apr 01 Javascript
分享8款优秀的 jQuery 加载动画和进度条插件
Oct 24 Javascript
JS仿Windows开机启动Loading进度条的方法
Feb 26 Javascript
JavaScript数据类型之基本类型和引用类型的值
Apr 01 Javascript
vuejs使用FormData实现ajax上传图片文件
Aug 08 Javascript
jQuery EasyUI window窗口使用实例代码
Dec 25 jQuery
Vue头像处理方案小结
Jul 26 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
Aug 28 Javascript
微信小程序如何实现radio单选框单击打勾和取消
Jan 21 Javascript
JavaScript实现队列结构过程
Dec 06 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使用GeoIP库实例
2014/06/27 PHP
php 实现301重定向跳转实例代码
2016/07/18 PHP
JS 拼图游戏 面向对象,注释完整。
2009/06/18 Javascript
javascript forEach通用循环遍历方法
2010/10/11 Javascript
javascript和HTML5利用canvas构建猜牌游戏实现算法
2013/07/17 Javascript
js替代copy(示例代码)
2013/11/27 Javascript
js实现精美的银灰色竖排折叠菜单
2015/05/16 Javascript
非常酷炫的Bootstrap图片轮播动画
2016/05/27 Javascript
JavaScript事件用法浅析
2016/10/31 Javascript
angular forEach方法遍历源码解读
2017/01/25 Javascript
深度了解vue.js中hooks的相关知识
2019/06/14 Javascript
详解JavaScript中的Object.is()与"==="运算符总结
2020/06/17 Javascript
python3实现字符串操作的实例代码
2019/04/16 Python
Numpy 中的矩阵求逆实例
2019/08/26 Python
python web框架Flask实现图形验证码及验证码的动态刷新实例
2019/10/14 Python
Pandas数据离散化原理及实例解析
2019/11/16 Python
python Opencv计算图像相似度过程解析
2019/12/03 Python
python基于socket函数实现端口扫描
2020/05/28 Python
Python3与fastdfs分布式文件系统如何实现交互
2020/06/23 Python
使用python批量修改XML文件中图像的depth值
2020/07/22 Python
Pycharm2020.1安装无法启动问题即设置中文插件的方法
2020/08/07 Python
PyCharm Community安装与配置的详细教程
2020/11/24 Python
Jupyter Notebook 远程访问配置详解
2021/01/11 Python
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
2017/01/12 HTML / CSS
巴西备受欢迎的服装和生活方式品牌:FARM Rio
2020/02/04 全球购物
金山毒霸系列的笔试题
2013/04/13 面试题
学习十八届三中全会精神实施方案
2014/02/17 职场文书
个人委托书格式
2014/04/04 职场文书
公安局负责人查摆问题及整改方案
2014/09/27 职场文书
民事赔偿协议书
2014/11/02 职场文书
教代会开幕词
2015/01/28 职场文书
小学感恩主题班会
2015/08/12 职场文书
大学军训通讯稿(2016最新版)
2015/12/21 职场文书
《敬重卑微》读后感3篇
2019/11/26 职场文书
一文搞懂Python Sklearn库使用
2021/08/23 Python
Redis实现短信验证码登录的示例代码
2022/06/14 Redis