vue传值的编码与解码

最新推荐文章于 2023-09-14 16:30:55 发布
最新推荐文章于 2023-09-14 16:30:55 发布
阅读量1.2k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WeiflR10/article/details/105949170
版权

编码:encodeURIComponent()

skip(){
  this.$router.push({
  path:'./channelPromotion?channelName='+'我是字 
  段'+'&&channelUrl='+encodeURIComponent('https://www.baidu.com/#/rejister.........')
  })
}

解码:decodeURIComponent()

mounted(){
    let channelUrl=decodeURIComponent(this.$route.query.channelUrl)
    console.log(channelUrl)
}

编码之后的数据

%7B%22loginId%22%3A%22111111%22,%22cCode%22%3A%22123456%22,%22name%22%3A%22%E7%94%A8%E6%88%B7%E5%A7%93%E5%90%8D%22,%22gender%22%3A%22M%22,%22college%22%3A%22%E5%AD%A6%E5%91%98%E5%90%8D%E7%A7%B0%22,%22major%22%3A%22%E4%B8%93%E4%B8%9A%E5%90%8D%E7%A7%B0%22,%22className%22%3A%22%E7%8F%AD%E7%BA%A7%E5%90%8D%E7%A7%B0%22%7D

解码之后的数据

{"loginId":"111111","cCode":"123456","name":"用户姓名","gender":"M","college":"学员名称","major":"专业名称","className":"班级名称"}

 

WeiflR10
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端人，这种情况你不该用$route.query
weixin_41190571的博客
12-16 1106
使用Vue Router这种情况下你不该用$route.query   话说前2天刚接手前同事的项目（入坑，哈哈）。今天突然产品来找我说：“victor，生产上接到用户反馈说自己登陆系统后，当前登录用户名没有显示出来！”。我当时马上回应说：”不应该啊！”。   首先说明下翻车的事故经过：我们的系统是采用单点登录(SingleSignOn，SSO)。当前用户登录统一应用入口后选择需要进入的应用，后台会在location加上用户统一身份认证的加密字符串然后去访问你的web应用。前端同学只需拿到当前经过加密的co
vue-router 路由跳转传值和获取显示 （解密展示）
weixin_47686269的博客
10-14 1025
vue-router 路由跳转传值和获取 跳转传值的两种方式 通过 path (路径) 进行跳转 如果传入对象, 可以在跳转的同时传参, 但是传递的query参数, 会被暴露在地址栏的查询参数中 this.$router.push('/login') 跳转到登录页 this.$router.push({ path: '/login', query: { aa: 11, bb: 22 } }) 通过 name (
vue中各种通信传值方式总结
10-17
在本篇文章里小编给大家分享了关于vue中各种通信传值方式的相关知识点，有兴趣的朋友们学习下。
vue props传值失败 输出undefined的解决方法
10-18
今天小编就为大家分享一篇vue props传值失败 输出undefined的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue传参==编码+解码
lyx1838102537的博客
01-08 769
编码 this.$router.push({path:'/query',query:{data:encodeURIComponent(data)}}) 解码 this.tableData=decodeURIComponent(this.$route.query.data) 地址栏效果:
uniapp vue 页面传参问题encodeURIComponent
qq_27909209的博客
09-14 1798
该方法不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： - _ .!其他字符（比如 ：;:@&=+$,# 这些用于分隔 URI 组件的标点符号），都是由一个或多个十六进制的转义序列替换的。encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。如果传递参数为对象的时候，需要转换成字符串，然后接收的时候，再转换成对象。这些字符，这些特殊字符会导致我们接收参数的错误。如果只是一个字符串的话，就不需要转换了。1、项目中如果我们传的参数出现。
vue--axios请求头设置传输编码格式+
weixin_33757609的博客
05-16 1万+
1：最近做vue-cli项目的时候，后台同事说传给他的报文中文全是乱码，设置格式如下：headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8' }复制代码2：关于请求数据格式的问题：（1）如果请求的Content-Type设置为application/x-www-form-urlencoded，那么...
encodeURIComponent,encodeURI的使用以及在vue中用url传值的两种方式
wanwan5856的博客
03-19 2万+
一、问题发生场景在vue中使用$route的query传值方式会发现值被转为一串不易读的字符，但是不影响从query参数中获取正确的原始的传值，这本来并没有引起我的注意。后来产品提了一个需求是某个页面必须在新标签页打开，搜了下vue好像没有提供这种方法，但是用window.open('#/urlxxx?fdn=' + fdn + '&page=interface')可以满足需求，只是期间遇...
Vue JS对URL网址进行编码解码，转换为对象
qq_59863007的博客
09-06 5049
JavaScript对URL网址进行编码解码，转换为对象
encodeURIComponent---转换uri编码，防止解析地址出问题
a432qbc的博客
06-14 891
encodeURLComponent
Vue前端编码规范.pdf
03-05
Vue前端编码规范
Vue的编码技巧与规范使用详解
10-16
主要介绍了Vue的编码技巧与规范使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue3父子组件传值.doc
02-05
vue3父子组件传值
获取window.location.href里面的值、获取URL中的参数、Js页面A跳转到页面B及URL携带参数
林中明月间丶
08-17 1万+
https://www.it1352.com/1203461.html // 解码用 decodeURIComponent(str) // 编码用 encodeURIComponent(str) 获取window.location.href里的参数值 lethref=window.location.href; letpersonName=this.getUrlParam("personName",href); //url中解析参数 getUrlParam: fun......
js页面之间以及vue $http请求向后台传递参数中文乱码问题解决
辣子鸡的博客
07-20 2万+
页面传参：本页面的js先对参数进行编码window.location="detail.html?"+encodeURI(encodeURI("country=中国")); 在detail页面获取参数时： decodeURI(window.location.href) 这样得到的地址，里面的中文不会乱码 $http异步请求向后台传参数： 同样对参数进行编码encodeURI(e
vue路由传参，对参数值编码处理
ZGH_77733的博客
12-17 1775
编码时，先用encodeURIComponent对字符串进行编码，再进行btoa进行Base64编码 解码时，先用atob对Base64编码的串进行解码，再用decodeURIComponent对字符串进行解码
vue2和vue3的参数接受方式以及vue中url参数解码
weixin_44020340的博客
10-19 1028
vue2,vue3路由接受参数,url解码
JS中encodeURIComponent（URL）编码与decodeURIComponent（URL）解码详解
热门推荐
木子李的博客
12-15 7万+
(1)   encodeURIComponent(url) 函数 定义和用法        encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。 语法        encodeURIComponent(URIstring) 参数 描述        URIstring 必需。一个字符串，含有 URI 组件或其他要编码的文本。 返回值
node-v0.8.10-sunos-x64.tar.gz
最新发布
05-16
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
vue传值
05-30
在 Vue.js 中，组件之间可以通过 props 和事件实现传值。以下是传值的两种方式： 1. props props 是一种用于从父组件向子组件传递数据的方式。在父组件中使用子组件时，可以通过 props 属性向子组件传递数据，例如： ```html <!-- 父组件 --> <template> <div> <child-component :message="message"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { name: 'ParentComponent', components: { ChildComponent, }, data() { return { message: 'Hello', }; }, }; </script> ``` 在子组件中，可以通过 props 属性接收父组件传递的数据，例如： ```html <!-- 子组件 --> <template> <div> <p>{{ message }}</p> </div> </template> <script> export default { name: 'ChildComponent', props: { message: String, }, }; </script> ``` 2. 事件 事件是一种用于从子组件向父组件传递数据的方式。在子组件中，可以通过 `$emit` 方法触发一个自定义事件，并传递数据，例如： ```html <!-- 子组件 --> <template> <div> <button @click="handleClick">Click me</button> </div> </template> <script> export default { name: 'ChildComponent', methods: { handleClick() { this.$emit('child-click', 'Hello'); }, }, }; </script> ``` 在父组件中，可以通过 `v-on` 指令监听子组件触发的自定义事件，并处理传递的数据，例如： ```html <!-- 父组件 --> <template> <div> <child-component @child-click="handleChildClick"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { name: 'ParentComponent', components: { ChildComponent, }, methods: { handleChildClick(message) { console.log(message); }, }, }; </script> ``` 通过事件的方式可以让子组件与父组件解耦，更加灵活。在实际开发中，可以根据实际需求选择合适的方式传递数据。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值