Vue JS对URL网址进行编码解码,转换为对象方式

 更新时间:2024年03月01日 10:13:31   作者:josemu  
这篇文章主要介绍了Vue JS对URL网址进行编码解码,转换为对象方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

一、URL网址编码解码

//url 有%3A 这种是ASCII编码,需要解码
//encodeURIComponent,decodeURIComponent   直接使用

编码:

var aaa = encodeURIComponent('http://www.baidu.com?name=Jose')
   aaa结果:"http%3A%2F%2Fwww.baidu.com%3Fname%3DJose"

解码:

var aaa = decodeURIComponent("http%3A%2F%2Fwww.baidu.com%3Fname%3DJose")
   aaa结果:"http://www.baidu.com?name=Jose"

1.编码示例

2.解码示例

 二、网址转换为对象

// 封装解析网址 转为Object 格式
function getParamByUrl (url) {
	 var theRequest = new Object();
	 var index = url.indexOf("?");
	 let strs
	 if (index != -1) {
			var str = url.substr(index + 1);
			strs = str.split("&");
			for(var i = 0; i < strs.length; i ++) {
					theRequest[strs[i].split("=")[0]]=(strs[i].split("=")[1]);
			}
	 }
	 return theRequest;
}

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。 

相关文章

  • VUE3函数的声明和使用举例

    VUE3函数的声明和使用举例

    这篇文章主要给大家介绍了关于VUE3函数的声明和使用的相关资料, Vue3是一种流行的JavaScript框架,它允许开发人员构建现代化的Web应用程序,需要的朋友可以参考下
    2023-07-07
  • vue-cli3.0如何使用prerender-spa-plugin插件预渲染

    vue-cli3.0如何使用prerender-spa-plugin插件预渲染

    这篇文章主要介绍了vue-cli3.0如何使用prerender-spa-plugin插件预渲染,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • vue项目ElementUI组件中el-upload组件与图片裁剪功能组件结合使用详解

    vue项目ElementUI组件中el-upload组件与图片裁剪功能组件结合使用详解

    这篇文章主要介绍了vue项目ElementUI组件中el-upload组件与图片裁剪功能组件结合使用,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • Vue实现简单的跑马灯

    Vue实现简单的跑马灯

    这篇文章主要为大家详细介绍了Vue实现简单的跑马灯,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-05-05
  • vue实现移动端拖动排序

    vue实现移动端拖动排序

    这篇文章主要为大家详细介绍了vue实现移动端拖动排序,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-08-08
  • VUE项目运行失败原因及解决办法图解(以vscode为例)

    VUE项目运行失败原因及解决办法图解(以vscode为例)

    记录一下踩坑,前几天从同事手上接手了一个Vue的项目,下面这篇文章主要给大家介绍了关于VUE项目运行失败原因及解决办法的相关资料,本文以vscode为例,需要的朋友可以参考下
    2023-06-06
  • vue使用video.js进行视频播放功能

    vue使用video.js进行视频播放功能

    video.js是一个拥有h5背景的网络视频播放器,同时支持h5以及Flash视频播放,这篇文章主要介绍了vue中使用video.js进行视频播放,需要的朋友可以参考下
    2019-07-07
  • vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案

    vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案

    这篇文章主要介绍了vue本地构建热更新卡顿的问题“75 advanced module optimization”解决方案,每次热更新都会卡在 "75 advanced module optimization" 的地方不动了,如何解决这个问题呢,下面小编给大家带来了解决方案,需要的朋友可以参考下
    2022-08-08
  • vue如何解决el-select下拉框显示ID不显示label问题

    vue如何解决el-select下拉框显示ID不显示label问题

    这篇文章主要介绍了vue如何解决el-select下拉框显示ID不显示label问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • el-upload前端实现多文件上传功能示例

    el-upload前端实现多文件上传功能示例

    在Vue.js中可以使用Element UI库中的<el-upload>组件来实现多文件上传的功能,这篇文章主要给大家介绍了关于el-upload前端实现多文件上传功能的相关资料,需要的朋友可以参考下
    2024-07-07

最新评论