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;
}

总结

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

相关文章

  • Vue基于Element-ui实现表格弹窗组件

    Vue基于Element-ui实现表格弹窗组件

    这篇文章主要为大家详细介绍了Vue基于Element-ui实现表格弹窗组件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • VUE watch监听器的基本使用方法详解

    VUE watch监听器的基本使用方法详解

    这篇文章主要介绍了vue使用watch监听器的基本使用方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-10-10
  • vue实现主题切换的多种思路分享

    vue实现主题切换的多种思路分享

    最近一段时间,一直在做主题方面的工作。我们的主题,并不是简单切换一下颜色,或者排版变化这些,而是变化比较大的主题。比如说:主题1和主题2看起来完全不一样,功能甚至都不一样。这样,通过切换css就无法做到了,因此我思考良久,使用了如下2种方法
    2021-06-06
  • vue中设置、获取、删除cookie的方法

    vue中设置、获取、删除cookie的方法

    今天小编就为大家分享一篇vue中设置、获取、删除cookie的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue-cli创建项目ERROR in Conflict: Multiple assets emit different content to the same filename index.html问题的解决办法

    vue-cli创建项目ERROR in Conflict: Multiple assets emit dif

    最近vue/cli创建项目后出现了错误,下面这篇文章主要给大家介绍了关于vue-cli创建项目ERROR in Conflict: Multiple assets emit different content to the same filename index.html问题的解决办法,需要的朋友可以参考下
    2023-02-02
  • 详解如何优雅运用Vue中的KeepAlive组件

    详解如何优雅运用Vue中的KeepAlive组件

    在Vue中,KeepAlive组件是一种特殊的组件,用于缓存已经渲染过的组件实例,本文主要为大家详细介绍了KeepAlive组件的用法,需要的小伙伴可以参考下
    2023-09-09
  • vue如何使用AIlabel标注组件

    vue如何使用AIlabel标注组件

    这篇文章主要介绍了vue如何使用AIlabel标注组件,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue使用element ui自定义手机验证规则问题

    vue使用element ui自定义手机验证规则问题

    这篇文章主要介绍了vue使用element ui自定义手机验证规则问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • vue使用Canvas在画布上添加图片方式

    vue使用Canvas在画布上添加图片方式

    这篇文章主要介绍了vue使用Canvas在画布上添加图片方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • 手把手带你封装一个vue component第三方库

    手把手带你封装一个vue component第三方库

    这篇文章主要介绍了手把手带你封装一个vue component第三方库,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-02-02

最新评论