vue url跳转解析和参数编码介绍
更新时间：2024年03月01日 10:06:51 作者：blakeyi
这篇文章主要介绍了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')总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
每次路由发生变化时都需要调用一次路由守卫，并且store中的数据会在每次刷新的时候清空，因此需要判断store中是否有添加的动态路由，本文给大家分享vue中根据用户权限动态添加路由的问题，感兴趣的朋友一起看看吧2021-11-11
Axios是一个基于Promise的HTTP客户端，用于浏览器和Node.js，这篇文章主要介绍了axios在Vue3中的使用,需要的朋友可以参考下2023-07-07
Vue.js 3.x 中的响应式数据ref 与 reactive详解
ref 和 reactive 是 Vue.js 3 中用于创建响应式数据的两个关键函数,它们分别适用于不同类型的数据,帮助我们更好地组织和管理组件的状态,这篇文章主要介绍了Vue.js 3.x 中的响应式数据：ref 与 reactive,需要的朋友可以参考下2024-01-01
这篇文章主要介绍了vue引用js文件的多种方式,本文大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-05-05
解决nuxt页面中mounted、created、watch执行两遍的问题
这篇文章主要介绍了解决nuxt页面中mounted、created、watch执行两遍的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了VueCli3构建TS项目的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
今天小编就为大家分享一篇vue实现动态列表点击各行换色的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
Vue报错：Uncaught TypeError: Cannot assign to read only propert
这篇文章主要给大家介绍了关于Vue报错：Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>' 的解决方法，文中介绍的非常详细，需要的朋友们下面来一起看看吧。2017-06-06
这篇文章主要给大家介绍了关于vue动态合并单元格并添加小计合计功能的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-11-11
Vue突然报错doesn‘t work properly without JavaScript enabled
最近在做项目的时候遇到了些问题,所以这篇文章主要给大家介绍了关于Vue突然报错doesn‘t work properly without JavaScript enabled的解决方法,需要的朋友可以参考下2023-01-01
最新评论