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查找法实现当前栏目的高亮显示的代码
Nov 24 Javascript
基于JQuery 选择器使用说明介绍
Apr 18 Javascript
jQuery中:first选择器用法实例
Dec 30 Javascript
给angular加上动画效遇到的问题总结
Feb 17 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
Apr 20 Javascript
js仿小米官网图片轮播特效
Sep 29 Javascript
JS中正则表达式要注意lastIndex属性
Aug 08 Javascript
vue中的event bus非父子组件通信解析
Oct 27 Javascript
Node.js模块全局安装路径配置方法
May 17 Javascript
详解vue-cli3多环境打包配置
Mar 28 Javascript
微信网页登录逻辑与实现方法
Apr 29 Javascript
vue 组件基础知识总结
Jan 26 Vue.js
带你使用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/03/04 PHP
php实现QQ小程序发送模板消息功能
2019/09/18 PHP
载入进度条 效果
2006/07/08 Javascript
Firefox下提示illegal character并出现乱码的原因
2010/03/25 Javascript
Jquery显示、隐藏元素以及添加删除样式
2013/08/09 Javascript
使用jspdf生成pdf报表
2015/07/03 Javascript
JavaScript动态设置div的样式的方法
2015/12/26 Javascript
js实现右键自定义菜单
2016/12/03 Javascript
TypeScript入门-接口
2017/03/30 Javascript
AngularJS获取json数据的方法详解
2017/05/27 Javascript
JS实现的走迷宫小游戏完整实例
2017/07/19 Javascript
基于Node.js实现压缩和解压缩的方法
2018/02/13 Javascript
Javasript设计模式之链式调用详解
2018/04/26 Javascript
微信小程序自定义组件实现环形进度条
2020/11/17 Javascript
vue 组件中使用 transition 和 transition-group实现过渡动画
2019/07/09 Javascript
WEEX环境搭建与入门详解
2019/10/16 Javascript
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
2020/03/04 Javascript
element中的$confirm的使用
2020/04/26 Javascript
理解JavaScript中的Proxy 与 Reflection API
2020/09/21 Javascript
swiper实现导航滚动效果
2020/12/13 Javascript
原生js实现滑块区间组件
2021/01/20 Javascript
[00:35]DOTA2上海特级锦标赛 VP战队宣传片
2016/03/04 DOTA
Python中无限元素列表的实现方法
2014/08/18 Python
Python通过调用mysql存储过程实现更新数据功能示例
2018/04/03 Python
Pandas:DataFrame对象的基础操作方法
2018/06/07 Python
Django框架模板语言实例小结【变量,标签,过滤器,继承,html转义】
2019/05/23 Python
centos+nginx+uwsgi+Django实现IP+port访问服务器
2019/11/15 Python
Python如何实现Paramiko的二次封装
2021/01/30 Python
h5页面唤起app如果没安装就跳转下载(iOS和Android)
2020/06/03 HTML / CSS
美国最大的骑马用品零售商:HorseLoverZ
2017/01/12 全球购物
大专学生推荐信范文
2013/11/19 职场文书
支行行长竞聘演讲稿
2014/05/15 职场文书
莫言诺贝尔获奖演讲稿
2014/05/21 职场文书
竞选班干部演讲稿600字
2014/08/20 职场文书
学生会竞选演讲稿纪检部
2014/08/25 职场文书
Spring Bean是如何初始化的详解
2022/03/22 Java/Android