1、router.js配置

需要在路径后定义上要传的属性名 --》       /:属性名(query方式不需要)

{
  path: '/CreateProgress/:name1',
  name: 'CreateProgress',
  component:CreateProgress
}
2、传参
与query不同的是  params是根据路由的name跳转的   而query是根据 path跳转的
<router-link :to="{name:'CreateProgress',params:{name1:'haha',name2:'enen'}}" target="_blank">xxxxx</router-link>
 
3、接受参数的方式和query相同
this.$route.params
this.$route.params.name1
 
query是
this.$route.query
this.$route.query.name1
 
 
当然 用params方式传参时,同时也可以用query方式传参
<router-link :to="{ name:'CreateProgress',params: { name1: '参数'},query: { queryId: status2 }}" >xxxxx</router-link>
接受方式 按照自己的接受方法接受 就行
 
 
 
也可以使用编程式跳转    是$router而不是$route    要跟接受参数的区分清楚
this.$router.push({ name:'CreateProgress',params: { name1:'参数'},query: { queryId: status2 }});
可以用click事件来触发

router-link params传参的更多相关文章

  1. vue-router query和params传参(接收参数),$router、$route的区别

    链接:https://segmentfault.com/a/1190000012735168 1.query方式传参和接收参数 传参: this.$router.push({ path:'/xxx' ...

  2. vue-router query和params传参(接收参数)$router $route的区别

    今天做项目时踩到了vue-router传参的坑(query和params),所以决定总结一下二者的区别. 直接总结干货!!! 1.query方式传参和接收参数 传参: this.$router.pus ...

  3. vue query或params传参

    1.query 传递端: this.$router.push({ path:"/AccountFP", query:{ id:row.id, userId:row.userId } ...

  4. vue刷新子页面,跳到主页,params传参引起的血案!

    今天,算是真正认识了params传参,为什么说params传参引起了血案? 起因是这样的,我正在做一个登陆的模块,公司想根据url不同的参数来区分是什么类型的会议, 于是后端推荐我用params传参的 ...

  5. axios 的 get 方法 params 传参 400 的问题

    axios 的 get 方法 params 传参,在输入框中输入某些特殊字符 例如中括号,请求时会直接报 400 错误,Bad Request. 原因:axios 的 get 方法,在使用 param ...

  6. vue-router中query和params传参(接收参数)以及$router、$route的区别

    query传参: this.$router.push({ path:'/...' query:{ id:id } }) 接收参数:this.$route.query.id params传值: 传参: ...

  7. vue router使用query和params传参的使用

    传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,希望可以帮到大家. Vue ...

  8. vue3.x版本路由router跳转+传参

    显示传参模式 get import { useRouter } from 'vue-router'; const router = useRouter(); let skipEdit = (key: ...

  9. vue-router query和params 传参和接收参数

    1.params 方式传递和接收参数 //传参 this.$router.push({ name: 'checkDetailInfo', params:{ fkdNum:fkdNum, jyayStr ...

随机推荐

  1. iOS开发-- 字符串分割、拼接

    ---------------------字符串分割实例---------------------NSString * ptr = @"I am a man"; //将字符串整体作 ...

  2. Python 编程技巧

    Python 生成器 Python 处理文件 Python 异常处理 Python 处理输入输出 Python 处理命令行参数 Python 对文件做校验 Python 对目录做遍历 Python 调 ...

  3. 获取预制和获取gameObject

    using UnityEngine; using System.Collections; using System.Collections.Generic; using UnityEditor; pu ...

  4. N76E003之IAP

    修改FLASH数据通常需要很长时间,不像RAM那样可以实时操作.而且擦除.编程或读取FLASH数据需要遵循相当复杂的时序步骤.N76E003提供方便FALSH编程方式,可以帮助用户通过IAP方式,重新 ...

  5. XML读取(string形式进行读取)

    #region 测试XML二进制读取 string strXmlData = "<xml><ToUserName><![CDATA[gh_ef65912f88f ...

  6. TNS-12532: TNS:invalid argument,Oracle的报错信息太让人无语

    TNS-12532: TNS:invalid argument,Oracle的报错信息太让人无语 现象: Tnsping报错: [oracle@unicomGZ01 admin]$ ../../bin ...

  7. Android与互联网的交互方式有三种

    数据下载:下载网络上的的数据,包括图片.代码文本.XML文件.JSON数据,音/视频等大文件,调用webservice. 数据上传:上传图片.文本.XML.JSON数据.音/视频文件,调用webser ...

  8. CentOS6.4挂载读写NTFS分区 (重要)

    如今很多的linux衍生版本已经支持自动连接NTFS分区了,之前在一次安装的过程中,遇到 linux不能识别NTFS分区,解决方法如下文: ============================== ...

  9. php 加密压缩

    php 把文件打成压缩包 ,可以去搜下 pclzip 搜很好多地方没有找到对压缩包进行加密操作的. 如果服务器是linux 那么见代码: $filename="test.csv"; ...

  10. [Sdoi2016]生成魔咒[SAM or SA]

    4516: [Sdoi2016]生成魔咒 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 1017  Solved: 569[Submit][Statu ...