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. 【代码审计】Cscms_v4.1 任意文件删除漏洞实例

    环境搭建: CSCMS :http://www.chshcms.com/ 网站源码版本:Cscms_v4.1正式版(发布日期:2017-06-05) 程序源码下载:https://github.com ...

  2. Nginx(七)-- 反向代理

    1.概念  反向代理(Reverse Proxy)方式是指以代理服务器来接受Internet上的连接请求,然后将请求转发给内部网络上的服务器:并将从服务器上得到的结果返回给Internet上请求连接的 ...

  3. python中的数据类型与json的数据类型之间的转化

    什么是json: JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.易于人阅读和编写.同时也易于机器解析和生成.它基于JavaScript Programm ...

  4. WIN32编程经验总结

    一 窗口和消息 1. 前缀: 2 WPARAM和LPARAM的意义在Windows是一种16位系统时,WndProc的第三个参数被定义为WORD,是一个16位的无符号整数,而第四个参数被定义为一个LO ...

  5. Lua中的注释

    Lua中有两种注释:行注释和块注释.行注释以“--”开头,可以注释这一行后面的内容.块注释以“--[[”开始,以“--]]”结尾,可以注释这个范围内的整个内容:块注释可以注释多行内容.下面是一个示例: ...

  6. VS中快捷键修改以及快捷键的查看

    eclipse用习惯了一直想把VS中的alt+/改为自动补全,同时自定义一下C#环境下自动加入命名控件的快捷键,前段时间摸索了一下,找到了比较好的方法 首先是vs中修改快捷键的方法:工具->选项 ...

  7. Caused by: java.lang.OutOfMemoryError: Failed to allocate a 29433932 byte allocation with 14683576 free bytes and 14MB

    解决Android 内存溢出 其实你可以添加在你的清单 android:hardwareAccelerated="false" android:largeHeap="tr ...

  8. 日记整理---->2017-05-14

    学习一下知识吧,好久没有写博客了.如果他总为别人撑伞,你又何苦非为他等在雨中. 学习的知识内容 一.关于base64的图片问题 byte[] decode = Base64.base64ToByteA ...

  9. 使用maven项目 转XSD、 WSDL 成Java类

    因为项目需要,在网上查找了很多WSDL的使用方式,但是感觉不是特别顺利.现在是利用Maven 项目快速转化的方法. 首先建立一个maven 项目 ,并将下面的pom文件复制进去. <projec ...

  10. [Offer收割]编程练习赛13 B.最大子矩阵[枚举]

    #1502 : 最大子矩阵 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 给定一个NxM的矩阵A和一个整数K,小Hi希望你能求出其中最大(元素数目最多)的子矩阵,并且该 ...