Vue 页面回退参数被当作字符串处理

最新推荐文章于 2024-07-04 17:30:46 发布
最新推荐文章于 2024-07-04 17:30:46 发布
阅读量531 收藏
点赞数
分类专栏： VUE 文章标签： vue 页面回退
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43196107/article/details/90379588
版权

当时情景是这样的，我从A页面跳到B页面时会传一个Boolean类型的参数，当B跳到C，再从C返回B的时候，控制台打印发现参数还在，可是判断怎么都不起作用，后来发现，当页面返回的时候，默认将参数变成了字符串，一个很坑的地方，以后多加注意

下面补一下验证结果：

一共有三个页面分别是HelloWorld，HelloWorld2，HelloWorld3

首先从HelloWorld->HelloWorld2，

再从 HelloWorld2->HelloWorld3后从HelloWorld3返回到HelloWorld2页面再看参数

 

所有参数的类型都变成了string，一个很大的坑！！！ 

不忘编码
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue把html标签转换为字符串,vue中将html字符串转换成html后遇到的问题小结
weixin_39822728的博客
05-30 2218
今天整理之前做vue项目时遇到的一些问题，发现了当时遇到的一个很小但是又会引出很多问题的一个问题(总之就是很有意思，听我慢慢给你到来)，这个问题就是当时处理后端数据时，如何将后端返回来的字符串转换成html标签，其实根据vue官网的一个v-html方法是不是觉得很简单，当时我也是这样想的，可是我发现了几个问题(官网给出的动态渲染任意 HTML 容易导致 XSS 攻击的问题我就不说了，在这里我只是用...
vue把html标签转换为字符串,vue学习—Convert HTML string to AST，如何将html字符串转换为ast数组结构...
weixin_42509894的博客
05-30 1488
获取html字符串首先在入口文件处，使用template属性或者el属性获取到需要解析的html字符串template1.html字符串，如Vue.component('alert-box', {template: `Error!`})2.如果值以 # 开始，则它将被用作选择符，并使用匹配元素的 innerHTML 作为模板el类型：string | Element通过el获取需要解析的模版exp...
Vue用query传值，布尔值变字符串问题
weixin_34403976的博客
01-26 944
用this.$route.query传值，true和false会转成string类型，导致Boolean值失效。可用eval() 函数进行转换。
vue跳转详情页后返回上一页保留上一页的页码以及查询参数
最新发布
weixin_47961174的博客
07-04 354
自己做的一个小笔记
使用v-html解决Vue.js渲染过程中html标签不能被解析（html标签显示为字符串）
热门推荐
志远的博客
11-02 7万+
在网页中，后台传来的json数据中包含html标签，将该json数据绑定到Vue.js中对象中，对该对象进行for循环，发现数据中的html标签不能被解析，而是当作字符显示出来。问题如下所示： 解决： Vue.js中提供了v-html这个指令来解决这个问题，或者对数据对象使用{{{vm.data}}}三个大括号来包裹对象，就可以正常解析了。代码改动如下： 参考资料：
VUE.js 中取得后台原生HTML字符串 原样显示问题
A15210311344的博客
05-30 487
今天使用vue调试页面，发现了页面上的一个问题，后台数据传过来的HTML字符串并没有被转换为正常的HTML代码，一拍脑门，发现忘记转换了，于是满心欢喜加上了{{{}}}。但是之后构建发现报错： 为此去官网上查了下资料，发现在vue2.0版本中，{{{}}}转换HTML的方式已经被废除，该版本中必须使用v-html标签进行转换，下面是具体的使用方法： <span v-html=...
vue-router路由传参，页面刷新，数据类型改变
guanfeii的博客
03-08 1187
vue-router传参，不管是params形式还是query形式传参，在页面刷新后，params和query对象中的属性所对应的属性值都会被浏览器自身强制转换为string类型(这一点与浏览器的sessionStorage和localStorage存储对象，对象会被转为string类型，不谋而合)，破环原先属性值的数据类型。 下面为6种数据类型属性值的解决方法： 1.number数据类型：页面刷新后，其类型会转换为`string`类型。那么我们在路由刷新页面，对传递过来的属性值做一次`Number()..
vue 页面回退mounted函数不执行的解决方案
10-15
在开发过程中，开发者可能会遇到一个问题：当从一个页面跳转到另一个页面，然后再通过浏览器的返回按钮回退到原来的页面时，发现原始页面的 `mounted` 钩子函数并没有再次执行，导致数据无法更新。这个问题涉及到 ...
vue router带参数页面刷新或回退参数消失的解决方法
10-17
本文将详细介绍如何在Vue Router中带参数进行页面跳转，并解决刷新或回退时参数消失的问题。 首先，了解在Vue Router中如何传递参数是非常重要的。在Vue Router中传递参数主要分为两种方式：params和query。 1. ...
VUE 截取字符串的方法
07-30
适合刚刚进入(JavaScript，Vue)编程领域的小白使用
解决vue单页面 回退页面 keeplive 缓存问题
10-15
本文将详细讨论如何解决Vue单页面应用中回退页面时，`keep-alive` 缓存问题。 在Vue应用中，我们可能会遇到这样的场景：从A页面跳转到B页面，A页面需要保持其状态，例如查询条件和列表数据。当在B页面进行了一些...
vue2.0页面前进刷新回退不刷新的实现方法
10-18
主要介绍了vue2.0页面前进刷新回退不刷新的实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
路由参数获取到的是字符串而不是布尔值
weixin_52230672的博客
05-30 179
所以正确写法是：错误写法：
在一个页面上 query 来进行传参问题
weixin_44291886的博客
03-10 252
传参query 在url 上的问题 如果你想在一个页面上进行传参的不用 保存起来的方法 进行传数组 可能会遇见一个问题 ，那就是 在刷新的时候可能你想要的参数就变成了 【object,object】 其实问题是 在刷新的时候 页面将 你想要的参数变成了 对象变成了字符串了 那是有解决方法的呢 1.在传递页面 params:JSON.stringify(params) 2.在接受页面 JSON.pa...
js常见问题
sunfan
06-04 418
js 实现一个函数对javascript中json 对象进行克隆 var newObject = JSON.parse(JSON.stringify(oldObject)); js 实现一个函数 获得url参数的值 function getQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^...
【VUE学习笔记】Select标签中Value属性取值,写数字却变成字符串的解决方法
DayHeart的博客
03-29 1954
1.给value属性添加绑定 v-bind:value="1" 此时的1会被当作js表达式,而不是双引号所包裹的字符串 2.给select标签的v-model增加.number v-model.number 此时select标签收集的数值都会强制转换成字符串
Vue前端字符串（“false“,“true“）转Boolean布尔值
龘
11-30 7226
【代码】Vue前端字符串（"false","true"）转Boolean布尔值。
vue 获取路由中参数，有时是字符串，有时是数字
大白的博客
05-24 5209
项目中的菜单是由后台动态传来的，通过ID来进行路由的跳转的， 但是发现通过（this.$route.query.id）获取 ID 进行判断页面时，有时获取到的是字符串、有时候是数字， 原因： 字符串：当已经处在某个有ID的路由页面时，当点击刷新，此时在获取 ID 时，ID 是从URL 字符串中获取的参数，获取到的也是字符串类型的值 数字：当点击菜单切换路由时，此时传过去的 ID 是Numb...
vue中换行符不换行、不生效的处理(\n或者＜br＞)
编程界明世隐的博客
03-10 4万+
先看一段代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <span>{{msg}}</span> </d
vue 回退页面并带参数
09-08
在Vue中，可以通过使用`$router.push()`方法来实现页面的回退，同时还可以传递参数。 首先，在需要回退的组件中，使用`$router.push()`方法将目标页面的路由路径和参数传递给它。例如，如果目标页面的路由路径是`/detail`，并且需要传递一个名为`id`的参数，可以这样写： ```javascript this.$router.push({ path: '/detail', query: { id: 1 }}) ``` 接下来，在接收参数的目标页面的组件中，可以通过`this.$route.query`来获取传递过来的参数。例如，在`/detail`页面中可以这样获取`id`参数： ```javascript this.$route.query.id ``` 需要注意的是，如果需要传递的参数较多或者需要保持某些状态，可以考虑使用`props`来传递参数。具体的做法是在路由配置中将`props`设置为`true`，然后在接收参数的页面的组件中，可以通过`props`来获取参数。例如： ```javascript // 路由配置 { path: '/detail', name: 'detail', component: Detail, props: true } // 接收参数的页面的组件 export default { props: ['id'], mounted() { console.log(this.id) } } ``` 在这种方式下，可以在目标页面的路由路径后直接添加参数，如`/detail/1`，然后通过`this.id`来获取传递过来的参数。 以上就是在Vue中回退页面并带参数的方法。希望对你有帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值