vue url跳转解析和参数编码介绍
背景
最近在做url跳转的时间遇到几个问题,故在此记录一下
vue获取当前url
url参数是挂载在 this.$route对象上的,其中query对象是所有参数的集合,fullPath是参数字符串形式,
类似下面的:
// 比如当前的url为 // https://www.blakeyi.com/msgtrace/?startTime=1647864978687&endTime=1647951378687 this.$route = { query:{ startTime:"1647864978687", endTime:"1647951378687" }, fullPath:"/?startTime=1647864978687&endTime=1647951378687" } // 所以要获取对应参数直接如下 let startTime = this.$route.query["startTime "]
使用window.open打开页面
window.open(url, '_blank') // 这里注意两个点 // 1是使用'_blank'参数打开新页面 // 2是url得加上http头,不然会在当前网址下跳转, 比如说 // url为 www.baidu.com, 这样子并不会跳转到百度页面,而是跳转到 "currentUrl/www.baidu.com" ,这样子自然是一个无效的页面
url参数里面有特殊字符处理
其实就是把一些特殊字符转换为 %hex的形式, 比如时间串里的冒号:, 它的ascii码是3A, 故转换后为%3A, js提供了专门的函数来进行转换,最常用的encodeURI和encodeURIComponent,对URL编码是常见的事,所以这两个方法应该是实际中要特别注意的。
它们都是编码URL,唯一区别就是编码的字符范围
其中encodeURI方法不会对下列字符编码 ASCII字母 数字 ~!@#$&()=:/,;?+’
encodeURIComponent方法不会对下列字符编码 ASCII字母 数字 ~!()’
所以encodeURIComponent比encodeURI编码的范围更大。
如果你需要编码整个URL,然后需要使用这个URL,那么用encodeURI
时间戳编码问题
// 注意转为UTC时间要减8小时 let timestamp = new Date(1647953273006).getTime() - 3600 * 8 * 1000 // 减8小时 let start = timestamp - 60 * 5 * 1000 // 减5分钟 let end = timestamp + 60 * 5 * 1000 // 减5分钟 let startTime = parseTime(start, '{y}-{m}-{d}T{h}:{i}:{s}.000Z') let endTime = parseTime(end, '{y}-{m}-{d}T{h}:{i}:{s}.000Z')
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
elementUI组件中el-date-picker限制时间范围精确到小时的方法
现在需要做一个时间选择器,可以根据小时(同时选天和小时)和天 和月,节假日等类型控制日历的选择样式,下面这篇文章主要给大家介绍了关于elementUI组件中el-date-picker限制时间范围精确到小时的相关资料,需要的朋友可以参考下2023-04-04详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
这篇文章主要介绍了详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-11-11elementui如何解决el-table重复写loading问题
这篇文章主要介绍了elementui如何解决el-table重复写loading问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
最新评论