Vue中如何使用base64编码和解码

 更新时间:2023年02月08日 09:29:30   作者:潘高  
这篇文章主要介绍了Vue中如何使用base64编码和解码问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

Vue使用base64编码和解码

在项目根目录下安装

npm install --save js-base64

在项目文件中引入

let Base64 = require('js-base64').Base64

在项目文件中使用

Base64.encode('潘高')  // 5r2Y6auY
Base64.decode('5r2Y6auY')  // 潘高

Vue路由获取query中base64解码出错

最近在使用vue-router,通过路由获取url中传递的base编码的数据,对数据进行解码的时候发现数据错乱。

找了许久才发现问题所在,其实就是vue-rouer在截取路由时,会把其中的 + 替换成空格,这样导致我们在获取base64编码串时出错 。

解决其实也很简单,通过正则把空格替换成**+**即可,这样就能完美的解决问题。

代码如下:

base64Str= base64Str.replace(/\s/g, '+');

ok,解决!

总结

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

相关文章

  • vue3 axios 实现自动化api配置详解

    vue3 axios 实现自动化api配置详解

    这篇文章主要为大家介绍了vue3 axios 实现自动化api配置详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • Element-ui DatePicker日期选择器基础用法示例

    Element-ui DatePicker日期选择器基础用法示例

    这篇文章主要为大家介绍了Element-ui DatePicker日期选择器基础用法示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • Vue3的ts报错:类型"{}"上不存在属性"xxx"的两种彻底根治解决方法

    Vue3的ts报错:类型"{}"上不存在属性"xxx"的两种彻底根治解决方法

    这篇文章主要给大家介绍了关于Vue3的ts报错:类型"{}"上不存在属性"xxx"的两种彻底根治解决方法,这是最近做项目中遇到的一个问题,这里给大家总结下解决办法,需要的朋友可以参考下
    2023-08-08
  • vue3实现多层级列表的项目实践

    vue3实现多层级列表的项目实践

    本文主要介绍了vue3实现多层级列表的项目实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • Vue实现一个带有缓存功能的Tab页签功能

    Vue实现一个带有缓存功能的Tab页签功能

    在现代 Web 应用中,Tab 页签功能是非常常见的一种交互模式,它可以帮助用户在不同的视图间快速切换,而不会丢失当前视图的状态,本文将介绍如何在 Vue 项目中实现一个带有缓存功能的 Tab 页签功能,需要的朋友可以参考下
    2024-08-08
  • elementPlus修改主题色以及皮肤设置思路

    elementPlus修改主题色以及皮肤设置思路

    这篇文章主要介绍了elementPlus修改主题色以及皮肤设置思路,具有很好的参考价值,希望对大家有所帮助。
    2023-04-04
  • vue-cli+webpack记事本项目创建

    vue-cli+webpack记事本项目创建

    这篇文章主要为大家详细介绍了vue-cli+webpack创建记事本项目,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • 基于vue实现循环滚动列表功能

    基于vue实现循环滚动列表功能

    这篇文章给大家介绍基于vue实现循环滚动列表功能,给大家介绍了该组件的用法,通过实例代码给大家介绍的非常详细,需要的朋友参考下吧
    2021-09-09
  • vue 使用moment获取当前时间及一月前的时间

    vue 使用moment获取当前时间及一月前的时间

    开发中会有要获取当前日期的需求,有的是获取到当前月份,本文就介绍了vue获取当前日期时间(moment、new Date()),文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2023-08-08
  • vue之计算属性的缓存computed的用法解读

    vue之计算属性的缓存computed的用法解读

    这篇文章主要介绍了vue之计算属性的缓存computed的用法解读,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-11-11

最新评论