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)


相关推荐

  • MFC:进程间通信方式[通俗易懂]

    MFC:进程间通信方式[通俗易懂]windows下进程间通信方式:1、剪贴板(Ctrl+C;Ctrl+V)2、匿名管道3、命名管道4、邮槽/****************************************************************************************/一、剪贴板:voidCClipboardDlg::OnBtnSend()//向剪贴板中放置

    2022年10月11日
  • Winform屏幕截图保存C#代码

    代码如下:已在项目中实现:http://hovertree.com/h/bjaf/76q5yeli.htm

    2021年12月21日
  • scikit-learn工具包中分类模型predict_proba、predict、decision_function用法详解「建议收藏」

    scikit-learn工具包中分类模型predict_proba、predict、decision_function用法详解「建议收藏」在使用sklearn训练完分类模型后,下一步就是要验证一下模型的预测结果,对于分类模型,sklearn中通常提供了predict_proba、predict、decision_function三种方法来展示模型对于输入样本的评判结果。说明一下,在sklearn中,对于训练好的分类模型,模型都有一个classes_属性,classes_属性中按顺序保存着训练样本的类别标记。下面是使用LogisticRegression分类器在为例,展示一下分类器的classes_属性。1、先看一下样本标签从0…

  • 电脑开机读不到固态硬盘怎么办_电脑读不到固态硬盘怎么办

    电脑开机读不到固态硬盘怎么办_电脑读不到固态硬盘怎么办电脑重启后发现电脑检测不出固态硬盘,这种情况大家不要慌张,下面就由学习啦小编跟大家分享电脑重启后读不到固态硬盘该怎么办,欢迎大家来阅读学习。电脑重启后读不到固态硬盘怎么办方法一1、首先进入BIOS后,选择“IDEHDDAutoDetection”项目,看是否可以检测到硬盘的存在,并核对型号是否一致,如果正常排除硬件问题,如果还不能找到硬盘,那么就是您的硬盘损坏或连接不正确。2、如果在bios…

  • 交换机基础

    交换机基础

  • sql server创建数据表的完整语法_sqlserver语法大全

    sql server创建数据表的完整语法_sqlserver语法大全sqlserver基础语法创建数据库创建表1.创建数据库2.表的创建3.在现有表中添加标识列4.创建外键5.添加外键6.约束7.创建局部临时表8.创建全局临时表9.创建具有check约束字段的数据库表10.创建含有计算字段的数据库表11.创建含有自动编号字段的数据库表12.创建含有排序字段和默认值的数据表13.动态判断数据库表是否存在14.查看表的各种信息,可以查看指定数据库表的属性、表中字…

    2022年10月28日

发表回复

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

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