vue路由传参的两种方式的区别_vue路由跳转获取参数

vue路由传参的两种方式的区别_vue路由跳转获取参数vue路由传参的两种方式

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

项目场景:

例如:点击table表格第一列进入详情页,这时候我们进行路由跳转就需要携带一些参数以便我们在详情页使用


跳转方式

一般我们有两种方式让路由携带参数

1.路由传参query(path是路由地址,query是需要传递的参数)

goDetail() { 
   
      this.$router.push({ 
   
        path: "/publish",
        query: { 
   
          roleName: "admin",
          id: 1,
        },
      });
    },

Jetbrains全家桶1年46,售后保障稳定

注意:如果传入的参数存在对象,则必须转成JSON字符串传入,接收的时候再转换

goDetail() { 
   
      let arr = [{ 
   name:"admin",value:111},{ 
   name:"admin2",value:222}]
      this.$router.push({ 
   
        path: "/publish",
        query: { 
   
          roleName: JSON.stringify(arr),
          id: 1,
        },
      });
    },

2.路由传参params(name与路由的name对应,params是需要传递的参数)

goDetail() { 
   
      this.$router.push({ 
   
        name: "publish",
        params: { 
   
          roleName: "admin",
          id: 1,
        },
      });
    },

注意:params传参刷新页面的时候会丢失数据,解决方法是在路由的配置文件里给该路由后面拼接需要的参数

{ 
   
    path: "/Publish/:roleName/:id",//:roleName与:id之间的/可以省略,看自己喜好
    name: "publish",
    component:import("../components/PublishApp"),
},

接收路由参数:

1.query的接收方式:

//参数不存在对象时
created() { 
   
    console.log(this.$route.query)
  },
//参数存在对象时,只能单独取,直接打印query报错
created() { 
   
   console.log(JSON.parse(this.$route.query.roleName));
  },

2.params的接收方式:

 created() { 
   
    console.log(this.$route.params);
  },

注意:

1.query相当于get请求,页面跳转的时候,可以在地址栏看到请求参数,而params相当于post请求,参数不会再地址栏中显示;
2.如果用params又不想刷新后丢失参数,只能拼在路由path后面;
3.个人觉得用params把参数拼在路由后面比query好看很多;
4.params想携带数组对象这些类型的数据,又不想刷新后丢失,我没找到解决办法,还是用query,有没有大神知道告诉我一下谢谢!!!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/234925.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • WSDL 详解_wsdl文件

    WSDL 详解_wsdl文件1.WebService的一些相关概念webservice:远程调用的一种方案。一种解决跨平台、跨语言间的分布式系统的集成(整合)方案esb:enterpriseservicebus企业服务总线soap:simpleobjectaccessprotocal简单对象访问协议(http+xml)soa:serviceorientedacrchiet

  • ARM指令集

    ARM指令集

  • java判断文件是否为图片格式_java读取图片流

    java判断文件是否为图片格式_java读取图片流前言Java检查文件类型有几种方法:1.判断文件后缀名Stringextension="";inti=fileName.lastIndexOf(‘.’);if(i>0){extension=fileName.substring(i+1);}//…if("jpg".equal

  • Nginx加密以及反向代理「建议收藏」

    Nginx加密以及反向代理「建议收藏」一、https加密算法http协议在传输过程中使用的是明文,如果传输的是用户名和密码等信息就不安全。https就是在原来http协议中加上ssl算法,来对传输的数据进行加密。https加密的核心就是通过秘钥来实现。秘钥(加密算法)的分类:1.对称算法(加密和解密用一样的密码):AES,DES(适合单机加密)2.非对称算法(公钥和私钥):RSA,DSA3.信息摘要:md5,sha256…

  • c++ map与unordered_map区别及使用

    c++ map与unordered_map区别及使用转自:https://blog.csdn.net/BillCYJ/article/details/78985895需要引入的头文件不同map:#include<map>unordered_map:#include<unordered_map>内部实现机理不同map:map内部实现了一个红黑树(红黑树是非严格平衡二叉搜索树,而AVL是严格平衡二…

  • hadoop生态圈的理解「建议收藏」

    hadoop生态圈的理解「建议收藏」 hadoop部分:hadoop生态圈的理解(HDFS,MapReduce,HBASE,zookeeper,hive,sqoop,flume,kafka,yarn,spark) 一、简介       &am

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号