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实现一个TreeMenu效果分享
Aug 28 Javascript
Javascript 加载和执行-性能提高篇
Dec 28 Javascript
jquery解析xml字符串示例分享
Mar 25 Javascript
javascript引用类型之时间Date和数组Array
Aug 27 Javascript
javascript 判断页面访问方式电脑或者移动端
Sep 19 Javascript
jQuery删除当前节点元素
Dec 07 Javascript
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
May 10 Javascript
使用ngrok+express解决本地环境中微信接口调试问题
Feb 26 Javascript
Vue使用mixins实现压缩图片代码
Mar 14 Javascript
vue2.0中set添加属性后视图不能更新的解决办法
Feb 22 Javascript
JavaScript实现打砖块游戏
Feb 25 Javascript
基于ajax及jQuery实现局部刷新过程解析
Sep 12 jQuery
带你使用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应用JSON技巧讲解
2013/02/03 PHP
php定时计划任务的实现方法详解
2013/06/06 PHP
更改localhost为其他名字的方法
2014/02/10 PHP
关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题
2010/12/08 Javascript
HTML,CSS,JavaScript速查表推荐
2014/12/02 Javascript
利用jquery制作滚动到指定位置触发动画
2016/03/26 Javascript
nodejs集成sqlite使用示例
2017/06/05 NodeJs
JS实现调用本地摄像头功能示例
2018/05/18 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
2018/10/23 Javascript
详解基于Vue,Nginx的前后端不分离部署教程
2018/12/04 Javascript
Chrome插件开发系列一:弹窗终结者开发实战
2020/10/02 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
2020/11/12 Javascript
[02:56]《DAC最前线》之国外战队抵达上海备战亚洲邀请赛
2015/01/28 DOTA
tornado框架blog模块分析与使用
2013/11/21 Python
Python面向对象程序设计之继承与多继承用法分析
2018/07/13 Python
Python中的集合介绍
2019/01/28 Python
30秒学会30个超实用Python代码片段【收藏版】
2019/10/15 Python
Python爬虫爬取电影票房数据及图表展示操作示例
2020/03/27 Python
三步解决python PermissionError: [WinError 5]拒绝访问的情况
2020/04/22 Python
Python Mock模块原理及使用方法详解
2020/07/07 Python
CSS3 实现童年的纸飞机
2019/05/05 HTML / CSS
微软台湾官方网站:Microsoft台湾
2018/08/15 全球购物
碧欧泉法国官网:Biotherm法国
2019/10/23 全球购物
2019年Java面试必问之经典试题
2012/09/12 面试题
一组SQL面试题
2016/02/15 面试题
年会活动策划方案
2014/01/23 职场文书
销售助理岗位职责
2014/02/21 职场文书
风险评估实施方案
2014/03/09 职场文书
加入学生会演讲稿
2014/04/24 职场文书
护士医德考评自我评价
2015/03/03 职场文书
2015年七一建党节活动方案
2015/05/05 职场文书
员工福利申请报告
2015/05/15 职场文书
2015年学校远程教育工作总结
2015/07/20 职场文书
“学党章、守党纪、讲党规”学习心得体会
2016/01/14 职场文书
教你使用一行Python代码玩遍童年的小游戏
2021/08/23 Python
解析探秘fescar分布式事务实现原理
2022/02/28 Java/Android