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

最新推荐文章于 2024-11-11 09:52:00 发布
最新推荐文章于 2024-11-11 09:52:00 发布
阅读量1.4k 收藏 2
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44487203/article/details/124738617
版权
在Vue.js开发中遇到一个问题，当通过路由传递参数并刷新页面后，参数类型由number变为string。这导致页面显示内容发生变化。原因是浏览器在刷新时会将路由的params和query值强制转换为string类型。为解决这个问题，可以调整数据类型，例如将下拉框value设为string，并统一传参类型为string。
摘要由CSDN通过智能技术生成

今天在开发的时候，发现刷新页面后，页面显示的内容跟我通过路由跳转进来的不一样，最后通过debugger发现第一次进入页面时，获取的路由传参为number,刷新页面后，获取的路由传参为string,代码如下
路由跳转代码

this.$router.push({
    path: '/wait', query:{
   queryType:1}})

页面获取路由传参代码

 mounted() {
   
    // 这里使用路由传参
    const queryType
最低0.47元/天 解锁文章
hello程
关注
Vue2路由守卫：解决路由传参页面刷新后参数消失的问题
l_q_l的专栏
08-24 2547
sessionStorage和localStorage都是HTML5提供的Web Storage API的一部分，用于在客户端存储数据。它们的主要区别在于数据的生命周期、存储的持久性以及适合的应用场景。sessionStorage适合存储临时数据，而localStorage适合存储需要长期保存的数据。两者都有5MB的存储空间限制，且只能存储字符串类型的数据，但可以通过序列化和反序列化的方式存储其他类型的数据。
Vue中 path + query 传参的坑（参数类型变化）
从零出发
12-04 6064
Vue中 path + query 传参的坑 一、概述 在我们使用Vue中 path + query 方式传参的时候，这里存在一些坑或者说是现象（参数类型因为刷新而变化），记录一下，供大家学习。 二、使用场景 我们在使用Vue中 path + query 方式传参的时候，可以使用参数中的某一个作为区分新增与编辑的标识。就我的个人习惯而言，我通常会传参数0为新增，具体的非0参数为编辑（后端中主键是...
vue-router刷新页面，query传参时参数的类型变了
qq_41189996的博客
03-03 769
https://segmentfault.com/q/1010000038525213/a-1020000038529289
vue遇到的问题五：修改路由参数，不会刷新该页面
GTbond的博客
04-22 4906
1. vue路由，修改某组件的路由参数，不会刷新该组件 需求：在某个组件中，内容由参数发起接口获取，且该组件由上/下翻页效果， 需要改变参数，更新内容 http://localhost:8080/#/module?type=1&id=15 //需要改变id 解决办法： 监听路由 方法一： watch:{ // 路由发生变化页面刷新 '$route' (to, from){ this.$router.go(0); } } //缺点：刷新一次页面，用户体验不好 方法二： // 将函
Vue从router中取值首次进入正常取值，再次刷新值变成string类型
最新发布
weixin_62430480的博客
11-11 243
Vue从router中取值首次进入正常取值，再次刷新值变成string类型
vue 路由传参，页面刷新后参数类型改变
且听风吟的博客
08-10 2587
今天发现一个小问题，列表通过路由传递的 number 类型参数，用 === 来判断 Number(this.$route.query.type) !== 1 结果发现有时候为 true ，有时候为 false。 进入页面，打印参数类型： 刷新页面，打印参数类型： 后来发现，原因是： vue-router 传参，不管是 params 形式还是query形式传参，在页面刷新后，params 和 query 对象中的属性所对应的属性值都会被浏览器自身强制转换为string类型 (这一点与浏览器的sessi
vue 路由传参 刷新后,传递的参数类型改变
m0_58575070的博客
01-19 450
问题: 今天在项目中遇到一个问题,就是路由传参的时候,首次渲染是可以拿到正确的值,刷新后传递的参数被强制转为了字符串类型;
vue刷新当前页面重新传递参数
way_wan的博客
08-30 4912
vue刷新当前页面重新传递参数 在vue中碰到了需要刷新当前页面并传递重新params参数的需求。 我们可以进入空白页再在空白页跳转回到上一个页面实现需求 首先在空白页写上路由守卫beforeRouteEnter，在beforeRouteEnter中获取到上一个路由，直接跳转回去 //空白页面 export default { beforeRouteEnter(to, from, next) { next((xq) => { //要注意，必须使用this.$router.repla
vue路由参数变化去刷新页面
weixin_41674235的博客
04-20 2528
添加key，让其变化是重新渲染
vue路由传参页面刷新参数丢失问题解决方案
12-13
最近项目中涉及到跨页面传参数和后台进行数据交互，看到需求之后第一反应就是用路由传参来解决；Vue中给我们提供了三种路由传参方式，下面我们一个一个的来看一下： 方法一：params传参： this.$router.push({ ...
Vue 监听路由变化，然后重载当前页面
学习笔记
12-20 2199
Vue 监听路由变化，然后重载当前页面 有时候，我们需要通过监听路由中参数的变化来重载当前页面内容，重新执行当前页面的 mounted() 这个生命周期， 但如果 location.reload() 是重载了整个项目，那么如何重载当前页面这个vue文件呢 一、App.vue App.vue 中添加如下内容 export default { data() { return { isRouterActiveAlive: true } },
【vue 刷新当前页面并且替换参数】
m0_55546349的博客
06-20 740
vue 刷新当前页面并且替换参数
简单的vue路由传参怎么刷新页面
qq_43060570的博客
06-22 317
vue路由传参怎么刷新页面
vue地址栏路由传参 参数为数组时刷新页面变为字符串 处理方案
吴小花的博客
04-07 516
3.这样刷新浏览器的时候，数组就不会自动变成字符串了。1.传参数之前添加JSON.stringify。2.接收参数JSON.parse。
Vue刷新当前页面并带参
weixin_45478056的博客
04-13 1262
Vue刷新当前页面并url带参
vue之this.$router.push页面刷新问题
热门推荐
weixin_47800450的博客
01-04 1万+
跳转当前路由(路由参数有变化)(路由参数无变化此方法无效) 使用this.$router.push进行跳转时，如果是跳转当前路由(路由参数有变化)，可在 App.vue 里的 router-view 标签设置 key 值。或使用监听器 watch <template> <div id="app"> <DataSearch/> <keep-alive :exclude="exclude"> <
vue 路由传递参数，刷新页面后参数丢失
qq_43103581的博客
08-31 9656
在用vue做项目的时候，发现在新页面刷新后，上一页面带过来的参数会丢失，查阅资料才发现原来自己对params和query理解不透彻 下面是两种传参方法： 1、用 params 传参，需要路由里加上这个参数 this.$router.push({name:'list', params:{id: id}}); routes: [ { path: '/list/:id', ...
解决：vue通过params传参刷新页面参数丢失问题以及实现vue路由可选参数的解决办法
青春木鱼的博客
08-06 2563
解决vue 通过name和params 进行页面传参时，刷新页面参数丢失问题以及vue路由实现可选参数
vue路由传参的几种方式及页面刷新数据丢失的问题
Elets的博客
09-28 2750
问题描述： 记录这几天在开发中遇见的一个关于路由传参后，页面刷新数据丢失的问题。场景如下：我需要携带参数id跳转到考试页面，在考试页面接收id，但是当考试页面刷新后，参数id就丢失了。（当时我是通过params传参的） 传参页面： <button @click="toExam(xxx.id)">去考试</button> 路由配置： { path: '/exam', //组件路径 name: 'exam', //组件别名 component: () =>
vue路由传参刷新页面参数丢失
03-28
在 Vue 路由传参时，如果刷新页面参数丢失，有以下几种可能的原因： 1. 参数没有在路由配置中声明 如果你使用的是动态路由参数，例如 `/user/:id`，那么在路由配置中需要声明这个参数，否则在刷新页面时，参数会被...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值