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 array 数组详解
Mar 22 Javascript
js以对象为索引的关联数组
Jul 04 Javascript
javascript 上下banner替换具体实现
Nov 14 Javascript
为什么JavaScript没有块级作用域
May 22 Javascript
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
Feb 20 Javascript
jQuery滑动到底部加载下一页数据的实例代码
May 22 jQuery
ES6中javascript实现函数绑定及类的事件绑定功能详解
Nov 08 Javascript
vue 将页面公用的头部组件化的方法
Dec 18 Javascript
使用vue中的v-for遍历二维数组的方法
Mar 07 Javascript
解决vue中监听input只能输入数字及英文或者其他情况的问题
Aug 30 Javascript
详解Vue-Router源码分析路由实现原理
May 15 Javascript
小程序中设置缓存过期的实现方法
Jan 14 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
phpmailer发送邮件之后,返回收件人是否阅读了邮件的方法
2014/07/19 PHP
php采用ajax数据提交post与post常见方法总结
2014/11/10 PHP
php实现遍历多维数组的方法
2015/11/25 PHP
WordPress中查询文章的循环Loop结构及用法分析
2015/12/17 PHP
php中访问修饰符的知识点总结
2019/01/27 PHP
laravel5.5安装jwt-auth 生成token令牌的示例
2019/10/24 PHP
用 javascript 实现的点击复制代码
2007/03/24 Javascript
预加载css或javascript的js代码
2010/04/23 Javascript
使用js的replace()方法查找字符示例代码
2013/10/28 Javascript
获取当前点击按钮的id用this.id实现
2014/03/17 Javascript
关于JavaScript命名空间的一些心得
2014/06/07 Javascript
javascript中定义类的方法详解
2015/02/10 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
2020/12/13 Javascript
JavaScript 继承详解(六)
2016/10/11 Javascript
完美解决IE不支持Data.parse()的问题
2016/11/24 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
2016/12/19 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
2017/11/21 Javascript
JS实现的DOM插入节点操作示例
2018/04/04 Javascript
Vue瀑布流插件的使用示例
2018/09/19 Javascript
微信小程序如何获取地址
2019/12/24 Javascript
手把手教你实现 Promise的使用方法
2020/09/02 Javascript
python目录操作之python遍历文件夹后将结果存储为xml
2014/01/27 Python
python开发之for循环操作实例详解
2015/11/12 Python
Python中断多重循环的思路总结
2019/10/04 Python
在 Python 中接管键盘中断信号的实现方法
2020/02/04 Python
基于Python中random.sample()的替代方案
2020/05/23 Python
Python限制内存和CPU使用量的方法(Unix系统适用)
2020/08/04 Python
python 动态绘制爱心的示例
2020/09/27 Python
使用Html5多媒体实现微信语音功能
2019/07/26 HTML / CSS
HTML5实现应用程序缓存(Application Cache)
2020/06/16 HTML / CSS
Muziker英国:中欧最大的音乐家商店
2020/02/05 全球购物
Jones Bootmaker官网:优质靴子和鞋子在线
2020/11/30 全球购物
就业推荐表自我鉴定
2013/10/29 职场文书
办公室主任竞聘演讲稿
2014/05/15 职场文书
爱牙日活动总结
2014/08/29 职场文书
Nginx服务器如何设置url链接
2021/03/31 Servers