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 相关文章推荐
基于Jquery+Ajax+Json的高效分页实现代码
Oct 29 Javascript
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
Nov 25 Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
Aug 06 Javascript
JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
Nov 15 Javascript
Web打印解决方案之普通报表打印功能
Aug 29 Javascript
jquery层级选择器(匹配父元素下的子元素实现代码)
Sep 05 Javascript
JavaScript输入分钟、秒倒计时技巧总结(附代码)
Aug 17 Javascript
js求数组中全部数字可拼接出的最大整数示例代码
Aug 25 Javascript
js中如何完美的解析数据
Mar 18 Javascript
ES6 Map结构的应用实例分析
Jun 26 Javascript
原生js实现的移动端可拖动进度条插件功能详解
Aug 15 Javascript
vue el-tree 默认展开第一个节点的实现代码
May 15 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对象类型判断
2008/08/27 PHP
简单谈谈PHP中的trait
2017/02/25 PHP
PHP弱类型语言中类型判断操作实例详解
2017/08/10 PHP
php实现获取农历(阴历)、节日、节气的类与用法示例
2017/11/20 PHP
详解Laravel服务容器的绑定与解析
2019/11/05 PHP
IE中radio 或checkbox的checked属性初始状态下不能选中显示问题
2009/07/25 Javascript
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
2011/01/11 Javascript
javascript中length属性的探索
2011/07/31 Javascript
Javascript学习笔记 delete运算符
2011/09/13 Javascript
ie支持function.bind()方法实现代码
2012/12/27 Javascript
Javascript中3种实现继承的方法和代码实例
2014/08/12 Javascript
jQuery鼠标经过方形图片切换成圆边效果代码分享
2015/08/20 Javascript
javascript同步服务器时间和同步倒计时小技巧
2015/09/24 Javascript
Node.JS中事件轮询(Event Loop)的解析
2017/02/25 Javascript
vue.js实现条件渲染的实例代码
2017/06/22 Javascript
iscroll动态加载数据完美解决方法
2017/07/18 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
2017/11/07 Javascript
JS实现中英文混合文字溢出友好截取功能
2018/08/06 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
2020/03/08 Javascript
vue中jsonp插件的使用方法示例
2020/09/10 Javascript
浅谈Python中用datetime包进行对时间的一些操作
2016/06/23 Python
python实现给微信公众号发送消息的方法
2017/06/30 Python
python web.py开发httpserver解决跨域问题实例解析
2018/02/12 Python
Python Image模块基本图像处理操作小结
2019/04/13 Python
python 获取等间隔的数组实例
2019/07/04 Python
tensorflow安装成功import tensorflow 出现问题
2020/04/16 Python
Django实现后台上传并显示图片功能
2020/05/29 Python
python利用 keyboard 库记录键盘事件
2020/10/16 Python
Python入门基础之数字字符串与列表
2021/02/01 Python
HTML5调用手机发短信和打电话功能
2020/04/29 HTML / CSS
中国专业的综合网上购物商城:京东
2016/08/02 全球购物
豪华复古化妆:Besame Cosmetics
2019/09/06 全球购物
高三自我鉴定
2013/10/23 职场文书
高二美术教学反思
2014/01/14 职场文书
售后求职信范文
2014/03/15 职场文书
原来闭幕词是这样写的呀!
2019/07/01 职场文书