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 相关文章推荐
jquery select(列表)的操作(取值/赋值)
Aug 06 Javascript
js 居中漂浮广告
Mar 21 Javascript
不使用XMLHttpRequest实现异步加载 Iframe和script
Oct 29 Javascript
JavaScript类属性的访问方式详解
Feb 11 Javascript
基于jquery animate操作css样式属性小结
Nov 27 Javascript
学习javascript面向对象 实例讲解面向对象选项卡
Jan 04 Javascript
全面了解javascript三元运算符
Jun 27 Javascript
JS实现HTML标签转义及反转义
Apr 14 Javascript
vue.js开发环境安装教程
Mar 17 Javascript
使用Vue开发一个实时性时间转换指令
Jan 17 Javascript
vue elementUI table 自定义表头和行合并的实例代码
May 22 Javascript
jQuery 实现扁平式小清新导航
Jul 07 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 组件化编程技巧
2009/06/06 PHP
PHP开发中常见的安全问题详解和解决方法(如Sql注入、CSRF、Xss、CC等)
2014/04/21 PHP
PHP实现简单的新闻发布系统实例
2015/07/28 PHP
PHP设计模式之策略模式原理与用法实例分析
2019/04/04 PHP
JQuery自定义事件的应用 JQuery最佳实践
2010/08/01 Javascript
javascript下高性能字符串连接StringBuffer类
2010/08/16 Javascript
JS图片预加载 JS实现图片预加载应用
2012/12/03 Javascript
js实现(全选)多选按钮的方法【附实例】
2016/03/30 Javascript
解决拦截器对ajax请求的拦截实例详解
2016/12/21 Javascript
VUE实现表单元素双向绑定(总结)
2017/08/08 Javascript
Vue调试神器vue-devtools安装方法
2017/12/12 Javascript
React Native中NavigatorIOS组件的简单使用详解
2018/01/27 Javascript
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
2018/06/14 Javascript
layui 上传插件 带预览 非自动上传功能的实例(非常实用)
2019/09/23 Javascript
微信小程序自定义组件components(代码详解)
2019/10/21 Javascript
详解Python中使用base64模块来处理base64编码的方法
2016/07/01 Python
Python实现简单过滤文本段的方法
2017/05/24 Python
Python爬虫PyQuery库基本用法入门教程
2018/08/04 Python
Python 面试中 8 个必考问题
2018/11/16 Python
Python list列表中删除多个重复元素操作示例
2019/02/27 Python
Django 开发环境与生产环境的区分详解
2019/07/26 Python
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
2013/04/25 HTML / CSS
如何避免常见的6种HTML5错误用法
2017/11/06 HTML / CSS
FOREO斐珞尔官方旗舰店:LUNA露娜洁面仪
2018/03/11 全球购物
意大利运动服减价商店:ScontoSport
2020/03/10 全球购物
意大利包包和行李箱销售网站:Bagaglio.it
2021/03/02 全球购物
PHP使用Redis队列执行定时任务实例讲解
2021/03/24 PHP
绿色环保口号
2014/06/12 职场文书
司法局群众路线教育实践活动整改措施思想汇报
2014/10/13 职场文书
大学生实习推荐信
2015/03/27 职场文书
小学开学典礼新闻稿
2015/07/17 职场文书
运动会宣传稿100字
2015/07/23 职场文书
团委副书记工作总结
2015/08/14 职场文书
初中班主任工作随笔
2015/08/15 职场文书
母婴行业实体、电商模式全面解析
2019/08/01 职场文书
Python如何加载模型并查看网络
2022/07/15 Python