vue-router刷新页面，query传参时参数的类型变了

最新推荐文章于 2024-01-19 15:55:31 发布

SZR___ __ ___

最新推荐文章于 2024-01-19 15:55:31 发布

阅读量749

点赞数

本文链接：https://blog.csdn.net/qq_41189996/article/details/114322239

版权

                    
                    https://segmentfault.com/q/1010000038525213/a-1020000038529289
query参数都是string类型，只不过vue-router在导航的时候自动帮你处理了参数。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

SZR___ __ ___

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

Vue中 path + query 传参的坑（参数类型变化）

从零出发

12-04

6036

Vue中 path + query 传参的坑一、概述在我们使用Vue中 path + query 方式传参的时候，这里存在一些坑或者说是现象（参数类型因为刷新而变化），记录一下，供大家学习。二、使用场景我们在使用Vue中 path + query 方式传参的时候，可以使用参数中的某一个作为区分新增与编辑的标识。就我的个人习惯而言，我通常会传参数0为新增，具体的非0参数为编辑（后端中主键是...

Vue - 完美解决 Router 路由跳转传参（对象 / 数组）目标页面刷新后参数丢失问题，无论如何刷新页面参数都会存在不会消息的解决方案（详细示例代码，一键复制运行）

王佳斌

03-23

4840

前言例如，有个列表页，点击后携带参数进入详情页，当刷新详情页后，携带的参数就获取不到了。我们要的是，无论怎么刷新目标页面，都不会出现获取不到的情况，如下图所示：解决方案如果通过 query 的方式传递对象或数组，在地址栏中会被强制转换成 [object Object]，所以获取不到。但您可以通过将对象参数，通过 JSON.stringify() 方法进行转换，在接收页（目标页）使用 JSON.parse() 再转回来。 // 列表页 const data = { type: 'a1

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

vue路由传参，刷新页面后参数类型改变

weixin_44487203的博客

05-12

1385

vue路由传参页面刷新后参数类型改变

vue-router路由传参，页面刷新，数据类型改变

guanfeii的博客

03-08

1229

vue-router传参，不管是params形式还是query形式传参，在页面刷新后，params和query对象中的属性所对应的属性值都会被浏览器自身强制转换为string类型(这一点与浏览器的sessionStorage和localStorage存储对象，对象会被转为string类型，不谋而合)，破环原先属性值的数据类型。下面为6种数据类型属性值的解决方法： 1.number数据类型：页面刷新后，其类型会转换为`string`类型。那么我们在路由刷新页面，对传递过来的属性值做一次`Number()..

vue 路由传参刷新后,传递的参数类型改变

最新发布

m0_58575070的博客

01-19

416

问题: 今天在项目中遇到一个问题,就是路由传参的时候,首次渲染是可以拿到正确的值,刷新后传递的参数被强制转为了字符串类型;

query传递的参数，页面刷新，数据类型改变问题

qq_46167326的博客

05-27

683

写巡检页面时，传递的id是 [数组] 的形式，第一次进入/xunjian页面时console.log(typeof this.$route.query.id)的也是[数组]类型,但强制刷新页面后，再次console.log(typeof this.$route.query.id)，数据类型变成string。在使用this.$route.query.id之前，做一次数据转化，让它变成[数组]类型。query可以传递任意类型的数据,传递之前不需要处理数据。

vue-router路由参数刷新消失的问题解决方法

08-30

vue-router路由参数刷新消失的问题解决方法路由参数刷新消失的问题解决方法是 vue-router 中常见的问题，本篇文章将为您提供四种解决方案。解决方案一：Session & 服务器渲染传统的解决方案是使用 Session 和...

vue router带参数页面刷新或回退参数消失的解决方法

10-17

在使用Vue Router进行页面间传递参数时，经常会遇到参数在页面刷新或者浏览器后退时消失的问题。本文将详细介绍如何在Vue Router中带参数进行页面跳转，并解决刷新或回退时参数消失的问题。首先，了解在Vue Router...

vue-router 路由传参

且听风吟的博客

03-25

8543

vue-router传递参数分为两大类：编程式的导航 router.push 声明式的导航 <router-link>

vue项目中传递参数跳转路由，刷新或从下级页面返回后参数消失解决方案

weixin_45106076的博客

07-25

1916

项目中碰到一个问题，从页面A->B->C之间携带参数跳转，刷新B页面或从C页面返回B页面时，A传给B的参数消失了，变成了undefined。

vue 通过query传非字符串参数, 结果获取时参数类型变成字符串

sky527759的博客

10-29

3651

做的项目排查一个bug，前端通过json传一个id给后端，发现这个id有时是整数，有时是字符串，后端订的接口是整数，开始排查，情况是前端代码一行没变，结果这个id有时是整数，有时是字符串，后面发现代码是通过query传参，vue框架的query传参不会改变传入参数的类型, 但是因为通过页面的query传参, 当用户手动点刷新后, query的参数就会被置为字符串类型, 解决方法: 从query获取的参数先进行字符串转换或解析成想要的类型后再使用 ...

vue 获取路由中参数，有时是字符串，有时是数字

大白的博客

05-24

5283

项目中的菜单是由后台动态传来的，通过ID来进行路由的跳转的，但是发现通过（this.$route.query.id）获取 ID 进行判断页面时，有时获取到的是字符串、有时候是数字，原因：字符串：当已经处在某个有ID的路由页面时，当点击刷新，此时在获取 ID 时，ID 是从URL 字符串中获取的参数，获取到的也是字符串类型的值数字：当点击菜单切换路由时，此时传过去的 ID 是Numb...

vue 路由传参，页面刷新后参数类型改变

且听风吟的博客

08-10

2517

今天发现一个小问题，列表通过路由传递的 number 类型参数，用 === 来判断 Number(this.$route.query.type) !== 1 结果发现有时候为 true ，有时候为 false。进入页面，打印参数类型： 刷新页面，打印参数类型：后来发现，原因是： vue-router 传参，不管是 params 形式还是query形式传参，在页面刷新后，params 和 query 对象中的属性所对应的属性值都会被浏览器自身强制转换为string类型 (这一点与浏览器的sessi

关于Vue路由获取query中base64解码出错的问题

西装暴徒_12138的博客

10-29

1237

这样导致我们在获取base64编码串时出错。解决其实也很简单，通过正则把空格替换成**+**即可，这样就能完美的解决问题。最近在使用vue-router，通过路由获取url中传递的base编码的数据，对数据进行解码的时候发现数据错乱。找了许久才发现问题所在，其实就是vue-rouer在截取路由时，会把其中的。

使用vue-router传参时注意事项

weixin_44824839的博客

10-13

1699

name = null inviter=undefined this.$router.replace('/home',{ query: { openId: openId, //string name: name, //null inviter:to.query.inviter, //undefined //这里只是作为测试:路由参数类型只能是： 'string | (str

vue-router处理刷新query参数消失问题

wzp20092009的博客

09-22

5429

概念-路由对象属性 $route.query 一个 key/value 对象，表示 URL 查询参数。 $route.path 字符串，对应当前路由的路径 $route.fullPath 完成解析后的 URL，包含查询参数和 hash 的完整路径。分析当浏览器刷新时，触发导航守卫 beforeEach方法等，只有在 next(path: to.path) 时改变了路由参数解决方案将 next(path: to.path) 修改为 next(path: to.fullPath)，这样就不会发生

vue-router传参攻略：刷新不丢失的正确姿势

"详解新手使用vue-router传参时注意事项，主要介绍了通过name和params以及path和query两种方式在vue-router中传递参数，并提到了参数丢失和类型转换的问题及解决方案。" 在Vue.js应用中，vue-router是官方推荐的...