首页 > 其他分享 >vue this.$router.push 页面传值问题

vue this.$router.push 页面传值问题

时间:2023-05-04 17:03:35浏览次数:43  
标签:isEdit vue false query push router 页面

在修改一个别人的bug的时候发现一个问题, 记录一下, vue前端页面在刷新页面后只读页面可以编辑了

在前一个传值页面他的写法是

this.$router.push({
        name:'xxx',
        query:{
          isEdit:false
          }
      });

在接收的时候写的是

this.isEdit = this.$route.query.isEdit ? true : false;

this.$router.push在传值的时候有两种方式,分别为如下,

1. 其中 name和params搭配, 参数在url上不显示, 值的类型是object, 支持json, 但是页面刷新后值就没有了

2. path和query搭配, 参数在url上显示, 值的类型都是string, 不能使用bool等类型, 页面刷新后还有

3. path不能和param搭配使用, 使用后参数无法读取

4. name和query也最好不要使用, 使用后参数可以获取到, 但是第一次为object类型, 刷新后变为string

上诉bug就是这种情况, 页面刷新后false由bool类型变为了string, 永远为true

      //方式1
      this.$router.push({
        name:'xxx',
        params:{
          isEdit:false
          }
      });
      //取值
      this.$route.params.isEdit

      //方式2
      this.$router.push({
        path:'xxx',
        query:{
          isEdit:false
          }
      });
     //取值
      this.$route.query.isEdit

 

标签:isEdit,vue,false,query,push,router,页面
From: https://www.cnblogs.com/fancyblogs/p/17371782.html

相关文章

  • Vue3数据无法显示/数据无法修改
    问题描述:昨天朋友问了我一个关于Vue3的问题,给他解答后,想起貌似自己当初也曾被这个问题困惑过,只不过被善用搜索引擎后找到了问题所在。现在考虑到可能有些朋友搜不到解决方法,所以现在用它的表现形式作为标题,可能更便于搜索到。现在重现一下这个问题:<divv-for="(item,idx)inl......
  • 如何回退未push的commit?
    如何回退未push的commit?教你一招,简单好用当你写完代码,提交了commit后,才发现分支错了,或者是下面这种情况(其他小伙伴协同开发,在一个分支上push了代码,但你不清楚,在未pull的情况下,先commit了你的代码),当你push代码时,会有以下报错: 提示让你merge,先别管他,此时去看一看git仓库,发现是有......
  • vue 原生方法实现pc端调用摄像头全屏视频考试(实时截屏上传,并提示当前环节
    <template><div><el-row><el-col:span="10"style=""><div><el-cardstyle="margin:0;padding:0;overflow-y:auto"><divstyle="width:100......
  • # vue 使用 threejs 实现实景看房效果 demo
    vue使用threejs实现实景看房效果demo关于这个threejs实现VR看房效果也超级简单,只需要提供一个思路的话就可以了其实,首先需要一个房间结构的贴图,这个贴图网上有,当然找个合适的也不好找,我找了一上午在别人的demo里面扣了一张出来,代码都是一样的,稍微说一下思路。一张全景......
  • 关于vue2中使用unocss样式无法生效的问题
    前言在维护公司一个技术栈为vue2+ts+unocss的老项目时发现unocss在开发环境和正式环境都不能生效,最先以为是插件的版本问题,排查后发现是因为项目在使用unocss时的配置没有配置完全,根据vue-cli的版本按照unocss的官方仓库里的example配置vue.config.js这是v......
  • Vue使用:内联style动态绑定backgroundImage/background
    1.直接在vue中使用style内联样式设置background或backgroundImage是无效的;比如这样写无效:<divstyle="background:url('../../assets/import/aa1.png')">内容。。。</div>2.必须使用拼接;但是直接拼接也是无效的;比如这样写无效:<div:style="{backgroundImage:'url('......
  • vue学习 第十一天 CSS3新特性 ---- 新增选择器(1、属性选择器 2、结构伪类选择
    CSS3新特性1、CSS3现状1)新增的CSS3特性有兼容性问题,ie9+才支持2)移动端支持优于PC端3.)不断改进中,应用相对广泛 2、CSS3新增选择器CSS3给我们新增了选择器,可以更加便捷,更加自由的选择目标元素。1)属性选......
  • java基于springboot+vue非前后端分离的网上商城购物系统、在线商城管理系统,附源码+数
    1、项目介绍java基于springboot+vue非前后端分离的网上商城购物系统、在线商城管理系统,实现管理员:首页、个人中心、用户管理、商品分类管理、商品信息管理、订单评价管理、系统管理、订单管理,用户;首页、个人中心、订单评价管理、我的收藏管理、订单管理,前台首页;首页、商品信息、......
  • vue学习 第十天(2) HTML5的新特性 ----- 语义化标签(布局标签)/ 多媒体标签(video、
    目标:能够说出3~5个HTML5新增布局和表单标签能够说出CSS3的新增特性有哪些 HTML5的新特性 HTML的新增特性主要是针对于以前的不足,增加了一些新的标签、新的表单和新的表单属性等。新特性都有兼容性问题,基本是IE9+以上版本......
  • vue学习 第十天(1) css高级技巧 ----CSS用户界面样式 / vertical-align属性应用
    用户界面样式 1)鼠标样式cursorli{cursor:pointer;}设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。 2、轮廓线outline给表单添加outline:0;或者outline:none;样式之后,就可以去掉默认的蓝色边......