Vue —— url上 #后面数据被截取问题

最新推荐文章于 2024-08-30 16:41:14 发布

贝塔贝卡贝

最新推荐文章于 2024-08-30 16:41:14 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/Kiruthika/article/details/124001945

本文讨论了在发送HTTP GET请求时遇到的问题，即当`username`包含特殊字符如`#`时，URL自动截断。为了解决这个问题，提出了使用`encodeURIComponent`函数对`username`进行编码，确保完整传递到接口。通过这个方法，可以正确地将带有特殊字符的数据传递到服务器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在username输入框中输入数据例如：123#123

接口请求：

this.$http.get(`api/info/start?username=${this.username}`)

url应该是：api/info/start?username=123#123

url结果是：api/info/start?username=123

解决方法：

this.$http.get(`api/info/start?username=${encodeURIComponent(this.username)}`)

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

贝塔贝卡贝

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

高级前端工程师

07-19

2206

vue2，nuxt2，视频截取，封面截取，实现视频上传截取多帧画面，Vue实现在视频中截取某一帧_vue视频怎么截取部分画面，视频截图获取第一帧或者某一帧，视频根据时间轴截取，上传视频之后截取画面，捕获截图，截取第几帧做为视频封面，上传视频截取默认图片，截取video视频中的某一帧，上传视频到腾讯云存储并获取视频第一帧，vue截取视频的部分画面，截取视频帧，任意一帧，获取任意视频时长和视频任意时间动画帧，上传视频获取视频第一帧做为封面，vue上传视频并且截取视频图片，截取当前播放的任意一帧视频为图片，截取第

高级前端工程师

07-18

4000

vue3，nuxt3，视频截取，封面截取，实现视频上传截取多帧画面，vue3截取视频的部分画面，截取视频帧，任意一帧，获取任意视频时长和视频任意时间动画帧，上传视频获取视频第一帧做为封面，vue上传视频并且截取视频图片，截取当前播放的任意一帧视频为图片，截取第几帧做为视频封面，Vue3实现在视频中截取某一帧_vue视频怎么截取部分画面，视频截图获取第一帧或者某一帧，视频根据时间轴截取，上传视频之后截取画面，捕获截图，截取第几帧做为视频封面，上传视频截取默认图片，截取video视频中的某一帧，上传视频到腾讯云

参与评论您还未登录，请先登录后发表或查看评论

解决vue项目在浏览器中打开后，#后面的链接被截取的问题

一个跑不快胖子的博客

12-27

2580

在做微信公众号下载的时候遇到了这个问题：微信公众号下载，做的是弹框提示，在浏览器中打开，结果在手机浏览器中打开的总是#之前的链接：例如：http://yy2jd7.natappfree.cc/#/download,手机浏览器上打开的页面链接：http://yy2jd7.natappfree.cc/#/ 在查了好长时间的资料之后，才知道有可能是浏览器缓存的问题，加上随机数，防止浏览器缓存；链接...

vue(hash路由) 微信内浏览器进行支付宝支付，解决在浏览器中打开后，#后面的链接被截取的问题

web小袋鼠

08-30

2288

<template> <div class="isWenxin-mask"> <div class="in-weixin" v-if="isWeixin"> <div class="not-pay" v-if="!payStatus"> <div class="weixin-tip"> ...

『解疑』vue路由hash模式在qq网页分享中截断#号后的hash值问题解决

DemoJx的博客

08-07

928

vue路由hash模式在qq网页分享中截断#号后的hash值问题解决

Vue URL哈希模式下参数拼接在#前面问题

ddd

08-04

5373

问题发现是在做授权时给后端一个回调地址，当回来就发现参数拼在#前面导致取不到query值。使用 earchParams.get() 取值如果没有该参数返回值为 null。使用new URL()后得到以下信息对地址重新拼接后改变url。别使用哈希模式，改为历史模式，接下来的事交给后端解决吧。这条博客是有关this.$route.query取不到值...

vue-router #号路由传参及后端接收返回失败解决

ye_xu16的博客

08-30

631

有兴趣可以自己去mdn查看，总之就是encodeURI转换编码并没有encodeURIComponent方法更完全，最后想后端传参只需要先转换编码在拿到解码就行了。前端路由传参是解决了，但是后端接收到我们的参数后还是吞掉了我们的#后面的内容，于是再次查文档，发现了这个。第一步查了一下，可以将其转为编码，于是我直接将URL的#号替换为%23，并通过路由传参传递给下一个页面。第二步改为传递query，并且将URL用encodeURI（）方法转换编码。然后发现虽然可以传递，但是再次传递时还是会解析成#

浅谈vue项目,访问路径#号的问题

01-19

而vue-router默认hash模式——–使用URL的hash来模拟一个完整的URL，于是当URL改变时，页面不会重新加载。因为对于正常的页面来说，更换url一定是会导致页面更换的，而只有更换url中的查询字符串和hash值的时候才...

vue 富文本编辑器 —— wangEditor

且听风吟的博客

08-26

2327

富文本编辑器wangEditor百度UEditorbootstrap-wysiwygckeditor ckeditorKindeditorTinymcevue-quill-editor 很多项目中都需要用到富文本编辑器，目前也有很多种类的富文本编辑器。我就查了一下资料，了解了一些目前常用的富文本编辑器 wangEditor http://www.wangeditor.com/index.html 国产，基于javascript和css开发的web富文本编辑器，开源免费，上传图片可以控制尺寸。重点在于它轻量，

补充：（方案二）vue路由hash模式（带#）微信公众号首次授权后ios总是跳首页的问题

Z.Dragon 的博客

02-25

1286

解决方案一请看我另一篇文章方案一利用 .html 文件作为中转页面进行路由重定向该页面在 static 文件夹下（vue打包时不会被编译），并只做 js 处理：截取参数解码——> 跳转页面 <script> let url = location.href.split('?') let pars = url[1].split('&') let data = {} pars.forEach((n, i) => { let p =

关于VueRouter，无法接收到url 携带的参数

qq_35895270的博客

02-20

929

VueRouter，无法接收到url 携带的参数

vue js 字符串截断

mingzuimo的博客

10-13

183

var a = 'fdgksudgksdcasi&1234456'; var after = a.split("&"); 输出:[fdgksudgksdcasi,1234456]

vue 通过url截取获取数据

cocolove4563d的博客

04-28

1135

var url = window.location.href var querys = url.substring(url.indexOf("?") + 1).split("&") var result = [] for (var i = 0; i < querys.length; i++) { var temp = querys[i].split("=") if (temp.length < 2) { result[temp[0]] = "" .

vue获取 #后？前端之间参数

m0_65730686的博客

11-12

1299

vue获取 #后？前端之间参数

vue分享的路径#后面的传参消失解决办法

weixin_30486037的博客

05-16

1432

1.router.js 在路由配置项首页的重定向去掉，添加alias: '/', 2.app.vue 引入query-string依赖包，观察是否有参数，跳转 import queryString from 'query-string' created () { var query = queryString.parse(location.se...

【已解决】URL里有#号，传参到Servlet时，url编辑器会自动删掉#号之后的所有字符串问题

Paul Walker, yeah, it's me

04-20

1220

【已解决】URL里有#号，传参到Servlet时，url编辑器会自动删掉#号之后的所有字符串问题

Vue3.0路由拦截

Fanbin168的专栏

11-07

2482

【代码】Vue3.0路由拦截。

使用短网址重定向自己的长链接时，在ios浏览器或者微信下重写向到带#的链接会被截断#后的字符串

atzqtzq的博客

12-03

1118

以为是uniapp生成的路由模式问题实际上是后一个网站未设置https，url链接中却带了#号，在ios下打开会截断。

前端中vue url 截取中的参数方法

阿乐的博客

06-07

632

其实就是一段代码能够截取当前的 url 路径参数。直接传入当前的url 就行了直接行~~~

vue3 html2canvas生成图片

最新发布

12-31

### 在 Vue3 中使用 html2canvas 导出页面内容为图片为了实现这一功能，在项目中安装 `html2canvas` 是必要的操作[^4]。对于 Vue3 项目的具体实施，可以按照如下方式编写代码： #### 安装依赖包首先确保已经通过命令行工具安装了所需的 npm 包： ```bash pnpm install --save html2canvas ``` #### 组件内部逻辑处理接着是在组件内引入并配置 `html2canvas` 的调用方法。下面是一个简单的例子来展示如何捕获指定 DOM 节点的内容并将其转换成 Canvas 对象再进一步转存为图片文件。 ```javascript <template>  <div id="capture"> 这里是你想要截取的画面区域... </div> <button @click="handleCapture">点击生成图片</button>  <img v-if="imageSrc" :src="imageSrc"/> </template> <script setup lang="ts"> import { ref } from 'vue'; import html2canvas from 'html2canvas'; const imageSrc = ref(''); // 处理按钮点击事件触发的函数 function handleCapture() { const element = document.getElementById('capture'); if (!element) return; html2canvas(element).then((canvas) => { // 将 canvas 转换成 base64 编码的数据 URL 形式的字符串表示形式 const imgDataUrl = canvas.toDataURL('image/png'); // 更新视图中的 img 标签 src 属性显示新创建出来的图像数据链接 imageSrc.value = imgDataUrl; // 如果还需要下载该图片，则可以通过创建 a 标签的方式模拟点击行为完成下载动作 const link = document.createElement('a'); link.href = imgDataUrl; link.download = "screenshot.png"; link.click(); }); } </script> ``` 这段代码展示了当用户按下按钮时会执行的操作——选取具有特定 ID (`#capture`) 的 HTML 元素作为目标对象传递给 `html2canvas()` 函数；一旦异步绘制过程结束返回了一个新的 `<canvas>` 实例之后，就可以利用其 `.toDataURL()` 方法获取 Base64 编码格式下的 PNG 图像串，并赋值给页面上的 `<img>` 标记用于即时查看所生成的结果。此外还提供了直接下载此图像的功能选项[^1]。针对可能出现的模糊问题，有几种优化策略可以帮助提高最终输出的质量，比如调整缩放比例、设置更高的分辨率参数等[^3]。如果默认情况下得到的图像质量不尽如人意的话，不妨尝试这些改进措施以获得更满意的视觉效果。