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实现的所谓的滑动门
May 23 Javascript
extjs之去除s.gif的影响
Dec 25 Javascript
jquery键盘事件使用介绍
Nov 01 Javascript
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
Jan 04 Javascript
jQuery链使用指南
Jan 20 Javascript
一步步教大家编写酷炫的导航栏js+css实现
Mar 14 Javascript
AngularJS入门(用ng-repeat指令实现循环输出
May 05 Javascript
React学习笔记之高阶组件应用
Jun 02 Javascript
js实现动态增加文件域表单功能
Oct 22 Javascript
nuxt.js中间件实现拦截权限判断的方法
Nov 21 Javascript
vue里如何主动销毁keep-alive缓存的组件
Mar 21 Javascript
vue样式穿透 ::v-deep的具体使用
Jun 04 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网络操作函数汇总
2015/05/18 PHP
解决PHP curl或file_get_contents下载图片损坏或无法打开的问题
2019/10/11 PHP
浅谈Laravel中的三种中间件的作用
2019/10/13 PHP
简短几句 通俗解释javascript的闭包
2011/01/17 Javascript
nodejs win7下安装方法
2012/05/24 NodeJs
zTree插件之多选下拉菜单实例代码
2013/11/06 Javascript
浅谈js数据类型判断与数组判断
2016/08/29 Javascript
折叠菜单及选择器的运用
2017/02/03 Javascript
将angular.js项目整合到.net mvc中的方法详解
2017/06/29 Javascript
jQuery判断自定义属性data-val用法示例
2019/01/07 jQuery
基于Vue 撸一个指令实现拖拽功能
2019/10/09 Javascript
基于JavaScript获取base64图片大小
2019/10/18 Javascript
three.js利用卷积法如何实现物体描边效果
2019/11/27 Javascript
Javascript实现鼠标点击冒泡特效
2019/12/24 Javascript
[01:13]2015国际邀请赛线下观战现场
2015/08/08 DOTA
[00:48]完美“圣”典2016风云人物:xiao8宣传片
2016/11/30 DOTA
Python中bisect的用法
2014/09/23 Python
Python的多态性实例分析
2015/07/07 Python
python爬虫入门教程--HTML文本的解析库BeautifulSoup(四)
2017/05/25 Python
简单了解什么是神经网络
2017/12/23 Python
Python3.4解释器用法简单示例
2019/03/22 Python
Python 实现训练集、测试集随机划分
2020/01/08 Python
python如何通过pyqt5实现进度条
2020/01/20 Python
Tensorflow安装问题: Could not find a version that satisfies the requirement tensorflow
2020/04/20 Python
解决python对齐错误的方法
2020/07/16 Python
Python爬虫设置ip代理过程解析
2020/07/20 Python
幼教个人求职信范文
2013/12/02 职场文书
公积金单位接收函
2014/01/11 职场文书
小学体育教学反思
2014/01/31 职场文书
公益广告语集锦
2014/03/13 职场文书
食品安全标语
2014/06/07 职场文书
党员学习中共十八大报告思想汇报
2014/09/15 职场文书
逃课打麻将检讨书
2014/10/05 职场文书
乱丢垃圾袋检讨书
2014/10/08 职场文书
毕业欢送会致辞
2015/07/29 职场文书
JavaScript实现简单计时器
2021/06/22 Javascript