vue 路由传参含有特殊字符$route获取不全问题

最新推荐文章于 2025-07-17 09:59:19 发布
转载 最新推荐文章于 2025-07-17 09:59:19 发布 · 3k 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：https://blog.csdn.net/html_css_jquery/article/details/126782934
文章标签：

#vue.js #前端 #javascript

本文探讨了在前端和后端交互过程中，因URL参数中含有特殊字符导致的解析问题。作者遇到的情况是，后端拼接的参数在前端使用this.$route.query获取时出现不完整或+号被转换为空格。为解决此问题，后端采用了encodeURIComponent()对特殊字符进行转码，前端则能正常通过this.$route.query获取完整参数。这个解决方案有效地解决了URL编码和解码的兼容性问题。

遇到一个场景，后端把参数拼接到地址上，前端通过获取拼接的内容进行一些操作。但是由于传递的值含有特殊字符，使用this.$route.query发现获取不全或者含有+号的转成空格。

开始的时候使用window.location.href 获取到参数值并使用decodeURIComponent()进行转换但是有些特殊字符还是无法进行转换。

后来的解决方案：使用encodeURIComponent()先让后端传过来的特殊字符进行转码一下，然后前端使用this.$route.query即可成功获取到参数。

qq_38425020
关注
传参时出现特殊字符（#、+）之类的解决办法（vue)
D170101的博客
08-24 6097
传参时出现特殊字符（#、+）之类的解决办法（vue)
vue进行编程式导航路由跳转时参数带有特殊字符没有全部传递过去
weixin_42829046的博客
09-24 612
接收时进行解码：encodeURIComponent（）传递时进行编码 ： encodeURI（）原因：参数带地址等特殊字符。
针对链接上参数带有特殊字符的处理
html_css_jquery的博客
09-09 1612
针对链接上参数带有特殊字符的处理
Vue中路由传参的方式(含有一些问题)
weixin_57677300的博客
01-11 571
​ 业务：路由跳转，home模块跳转search模块，home的数据带上给search上使用。home.vue${this${thissearch.vue 获取传递过来的参数
vue路由传参---query和params
youngeffort的博客
03-21 331
1、query 用法： 路由词典不需配置参数 传值：query传递 取值：this.$route.query.参数 url表现： 参数在/后（在路径上） 用途：可传递一些特殊字符的参数（比如带"/"的时间） 2、params 用法： 路由词典需要配置参数 传值：路径传递 取值：this.$route.params.参数 url表现： 参数在？后（在查...
vue路由传参，参数包含特殊字符，参数无法正常使用
最新发布
shadow__jing的博客
07-17 279
传入路由的参数中包含特殊字符，比如：#、$、@、！、-、=、+、等等时，路由是无法识别这种特殊字符的。
vue 同页面传参取不到_vue痛点问题集锦 - 列表进入详情页的传参问题
weixin_34110970的博客
01-13 439
例如商品列表页面前往商品详情页面，需要传一个商品id;前往detail页面 c页面的路径为http://localhost:8080/#/detail?id=1，可以看到传了一个参数id=1，并且就算刷新页面id也还会存在。此时在c页面可以通过id来获取对应的详情数据，获取id的方式是this.$route.query.idvue传参方式有：query、params+动态路由传参。说下两者的区别：...
精选资源
vue路由传参 vue路由传参
11-18
Vue.js 是一款流行的前端框架，它的路由管理器 Vue Router 是实现单页面应用（SPA）功能的重要组成部分。在构建SPA的过程中，我们经常需要在不同的路由之间传递参数，以便于组件之间共享数据。Vue Router 提供了两种...
vue路由传参三种基本方式详解
10-15
Vue.js 是一个流行的前端框架，它的路由管理器 Vue Router 是实现单页面应用（SPA）导航的重要组成部分。在Vue Router中，有三种基本的途径来传递参数给目标组件，分别是通过`params`、`query`以及直接在路径中硬...
vue router 传参获取不到的解决方式
10-15
通过上述修改，可以确保Vue Router根据提供的路由名称和参数来动态生成路径，并且在目标组件中可以通过`this.$route.params`正确获取到参数。 总结来说，使用vue-router进行路由跳转和参数传递时，必须清楚理解...
浅析vue-router jquery和params传参(接收参数)$router $route的区别
10-18
### Vue-Router中$router与$router的区别 在Vue.js开发中，Vue-Router是...希望本文的内容能够帮助到在Vue.js项目中遇到路由传参问题的开发者，并解决相关问题。如果读者有任何疑问或需要进一步的帮助，欢迎留言讨论。
Vue路由传参（使用query传参页面刷新数据丢失问题）
...
04-10 1699
vue路由传参（使用query传参页面刷新数据丢失问题）
在做VUE项目时遇到的问题及解决办法：使用路由跳转页面时传参的两种方法，以及这两种方法的综合使用
summer_my_sunshine的博客
08-06 1262
一、使用path和query，使用该方式跳转的页面在路径中会携带query中的参数，这种方式重新加载页面后参数依然存在； 1.通过router-link进行跳转： <router-link to="{path:'/search-list-all',query:{searchVal:searchInfo}}"></router-link> 2.使用$router方式跳...
vue router 路由跳转获取不到参数
qq_45991812的博客
08-31 2853
混淆 query 和 params 的使用方法, 在使用 params 传参时错误的使用了 path。query 传参是使用 path 来引入，会将传递的参数显示在 url 后，像是带参的 get 请求。使用 query 页面刷新时不会清空传入的数据， params 则会清空。params 传参使用 name 引入，会隐藏参数，像是 post。路由传参一直不能获取到参数, 未出现报错。使用name要对应params。使用path要对应query。
VUE项目中遇到的问题和解决办法 (1) route.query刷新后丢失
NidhoogJX的博客
12-14 2302
route.query刷新获取不到的问题
为什么要urlencode()
热门推荐
shaukon的博客
04-19 2万+
why 1.。当字符串数据以url的形式传递给web服务器时，字符串中是不允许出现空格和特殊字符串的 2.。url对字符有限制，比如把一个邮箱放入url，就需要使用urlencode函数。 3.。url转义其实也只是为了符合url的规范而已。因为在标准的url规范中中文和很多的字符是不允许出现在url中的。 urlencode的说明： ur...
当前地址栏（URL)参数含有特殊符号的处理[vue]
qq_41994014的博客
08-12 6962
最近项目里有这样一个需要，用户可以通过外部链接进入我们的系统，我们需要从它携带的参数token中获取该值，但是该值在获取后含有特殊字符，如空格、#等。 首先我们需要先了解基本网址URL中特殊字符转义编码 字符 URL编码值 = %3D + %2B 空格 %2F ? %3F # %23 & %26 获取地址栏对应的地址参数信息以及用replace进行对该数据处理 let token = this.$route.query.token; if (toke
关于vue2.0中 $route和$router
weixin_30568591的博客
11-02 111
今天在做项目的一个页面路由时，传参这里搞了一整天...... 明明记得this.$router.query（注意这里的query是从router-link中传的）。死活拿不到值。郁闷了一整天，后来才发现 应该是 this.$route.query，route不是router。 返回上一页 用的是this.$router.go(-1),而我错误的认为获取参数也是this.$router中...
解决Vue Router4中params 传参失效和报错问题
LP'S Blog
02-27 6581
在使用vue-router4中params 进行路由组件之间传参，跳转页面接收不了并出现如下错误如下是我的代码传输页面接收页面。
vue路由中什么时候用$route什么时候用$router
07-15
### `$route` 和 `$router` 的区别及使用场景** 在 Vue Router 中，`$route` 和 `$router` 是两个关键对象，它们分别承担不同的职责，适用于不同的使用场景。 `$route` 对象用于获取当前路由的信息，包括路径（`path`）、名称（`name`）、参数（`params`）以及查询字符串（`query`）等。例如，可以通过 `this.$route.path` 获取当前 URL 的路径部分，或者通过 `this.$route.params.id` 来获取动态路由参数。这种信息通常用于根据当前路由状态来决定组件的行为或显示内容[^3]。 另一方面，`$router` 是一个全局的路由实例，它提供了控制导航的方法，如 `push()`、`replace()` 和 `go()` 等。这些方法允许开发者以编程方式更改应用的路由状态，比如跳转到另一个页面或更新历史记录。例如，使用 `this.$router.push({ name: 'user', params: { userId: 123 } })` 可以导航至名为 `'user'` 的路由，并传递 `userId` 参数[^5]。 因此，在实际开发过程中，当需要读取有关当前位置的信息时，应该使用 `$route`；而当需要执行导航操作或访问路由配置中的方法和属性时，则应使用 `$router`。理解两者的区别有助于更有效地利用 Vue Router 提供的功能来构建单页应用程序。 ```javascript // 示例代码：展示如何使用 $route 和 $router export default { template: `<div>Current Path: {{ currentPath }}</div>`, data() { return { currentPath: this.$route.path // 使用 $route 获取当前路径 }; }, methods: { navigateToUser(userId) { this.$router.push({ name: 'user', params: { userId } }); // 使用 $router 进行导航 } } }; ``` ### 相关问题 1. 如何在 Vue 路由中获取动态路由参数？ 2. 在 Vue.js 中如何实现编程式导航？ 3. Vue Router 中的命名路由有什么用途？ 4. 如何在 Vue 应用程序中监听路由变化？ 5. Vue Router 提供了哪些方法来进行历史记录管理？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值