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 相关文章推荐
用 JSON 处理缓存
Apr 27 Javascript
基于javascript简单实现对身份证校验
Jan 25 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
Jun 17 Javascript
AngularJS基础 ng-class-odd 指令示例
Aug 01 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
Dec 17 Javascript
通过修改360抢票的刷新频率和突破8车次限制实现方法
Jan 04 Javascript
Canvas实现放射线动画效果
Feb 15 Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
Apr 13 Javascript
node中间层实现文件上传功能
Jun 11 Javascript
vue组件实践之可搜索下拉框功能
Nov 25 Javascript
微信小程序实现时间进度条功能
Nov 17 Javascript
JS中的const命令你真懂它吗
Mar 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
博士208HAF收音机实习报告
2021/03/02 无线电
PHP脚本的10个技巧(7)
2006/10/09 PHP
PHP连接MySQL查询结果中文显示乱码解决方法
2013/10/25 PHP
php计算税后工资的方法
2015/07/28 PHP
WordPress开发中短代码的实现及相关函数使用技巧
2016/01/05 PHP
javascript css styleFloat和cssFloat
2010/03/15 Javascript
js获取IP和PcName(IE)在vs中可用
2013/08/02 Javascript
node.js中的fs.truncateSync方法使用说明
2014/12/15 Javascript
使用js画图之正弦曲线
2015/01/12 Javascript
js实现简单秒表走动的时钟特效
2020/03/25 Javascript
js判断文件格式及大小的简单实例(必看)
2016/10/11 Javascript
Javascript的动态增加类的实现方法
2016/10/20 Javascript
基于zTree树形菜单的使用实例
2017/12/25 Javascript
使用React手写一个对话框或模态框的方法示例
2019/04/25 Javascript
解决Layui中templet中a的onclick参数传递的问题
2019/09/20 Javascript
python 获取et和excel的版本号
2009/04/09 Python
python使用threading获取线程函数返回值的实现方法
2017/11/15 Python
详谈python在windows中的文件路径问题
2018/04/28 Python
numpy np.newaxis 的实用分享
2019/11/30 Python
Python3.7实现验证码登录方式代码实例
2020/02/14 Python
Python SMTP发送电子邮件的示例
2020/09/23 Python
使用CSS3实现SVG路径描边动画效果入门教程
2019/10/21 HTML / CSS
HTML5 本地存储实现购物车功能
2017/09/07 HTML / CSS
HTML5 常用语法一览(列举不支持的属性)
2010/01/26 HTML / CSS
斯凯奇美国官网:SKECHERS美国
2016/08/20 全球购物
与UNIX有关的几个名词
2015/09/17 面试题
《口技》教学反思
2014/02/21 职场文书
迎新晚会策划方案
2014/06/13 职场文书
生产操作工岗位职责
2014/09/16 职场文书
委托书的写法
2014/09/16 职场文书
公司周年庆典标语
2014/10/07 职场文书
2015年植树节活动总结
2015/02/06 职场文书
英语教师个人总结
2015/02/09 职场文书
信息技术课教学反思
2016/02/23 职场文书
2016年“我们的节日·中秋节”活动总结
2016/04/05 职场文书
golang 如何用反射reflect操作结构体
2021/04/28 Golang