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,转载请注明出处:http://www.javaforall.cn/234925.html原文链接:http://www.javaforall.cn

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

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

(0)


相关推荐

  • 手眼标定原理ur5_手眼标定实现「建议收藏」

    手眼标定原理ur5_手眼标定实现「建议收藏」手眼标定基于Tsai的两步法标定,是经典的Ax=xB求解模型。Tsai的两步法标定是基于径向校正约束;第一步:利用最小二乘法求解线性方程组,得出相机的外参数;第二步:根据获得的相机外参数,求取相机的内参数;如果无透视畸变,可以使用一个线性方程求出。罗第6、7章;特别:P164-166)1.手眼标定就是对机械手和相机的位置关系进行标定,这样根据识别得到的像素位置去引导机械手去抓取。2.eye-…

  • pycharm配置环境及安装第三方库_pycharm关联python

    pycharm配置环境及安装第三方库_pycharm关联pythonpycharm配置python环境的方法是:1、依次点击【File】、【ProjectInterpreter】;2、点击【ShowAll】,选择【ExistingEnvironment】;3、选择python的安装路径,点击OK即可。配置方法:1、打开软件,依次点击【File】→【Settings】→【Project】→【ProjectInterpreter】,这样我们就进入了配置Pyth…

  • mysql寻呼最快

    mysql寻呼最快

    2021年12月31日
  • 不会报错的Matlab2018a安装包[通俗易懂]

    不会报错的Matlab2018a安装包[通俗易懂]matlab2018a的百度云盘链接:https://pan.baidu.com/s/1972rkmKFw1xZLXfnYtNv-Q提取码:k6hc(永久有效)安装包内含有详细的安装教程的word文档。安装完如下:

  • LDA Effect Size分析 LEfSe详解

    LDA Effect Size分析 LEfSe详解LDAEffectSize分析LEfSe详解LEfSe的作用LEfSe的原理LEfSe的作用在介绍LEfSe的作用前,我们先解释一个概念——biomarker,维基百科给出的定义是Abio-marker,orbiologicalmarkerisameasurableindicatorofsomebiologicalstateorcondition.Biomarkersareoftenmeasuredandevaluatedtoexaminenorma

  • Python保留指定位数的小数

    Python保留指定位数的小数Python保留指定位数的小数1’%.2f’%f方法(推荐)2format函数(推荐)3round()函数4不进行四舍五入,直接进行截断1’%.2f’%f方法(推荐)f=1.23456print(‘%.4f’%f)print(‘%.3f’%f)print(‘%.2f’%f)结果:1.23461.2351.23这个方法会进行四舍五入2…

发表回复

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

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