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. Install VMware Workstation as a Service

    Under default conditions, VMware Workstation does not support the ability to run virtual machines as ...

  2. java jni调用

    http://www.cnblogs.com/mandroid/archive/2011/06/15/2081093.html

  3. Splash autoload() 方法

    autoload() 方法可以设置每个页面访问时自动加载的对象,比如自动加载 JavaScript 代码,自动加载 Ajax 代码等等 注意此方法只负责加载 JavaScript/Ajax 代码,不执 ...

  4. Kafka版本升级 ( 0.10.0 -> 0.10.2 )

    升级Kafka集群的版本其实很简单,核心步骤只需要4步,但是我们需要在升级的过程中确保每一步操作都不会“打扰”到producer和consumer的正常运转.为此,笔者在本机搭了一个测试环境进行实际的 ...

  5. 【大数据系列】hive安装及启动

    一.安装好jdk和hadoop 二.下载apache-hive https://mirrors.tuna.tsinghua.edu.cn/apache/hive/hive-2.3.0/ 三.解压到安装 ...

  6. AD采样模块采集带模拟量真空表值的实验

    实验采用带模拟量,分辨率为1-5V,量程为0--101kpa的真空表 数据采集模块采用DAM-8021,  16位模块 算法描述如下: 真空表读数范围: 0到-101kpa 模拟量输出: 1-5V 一 ...

  7. POP3协议分析

    http://m.blog.csdn.net/bripengandre/article/details/2192111 POP3协议分析 第1章.     POP3概述 POP3全称为Post Off ...

  8. Linux命令 swap:内存交换空间

    swap 内存交换空间的概念 swap使用上的限制

  9. LeetCode 20 Valid Parentheses (括号匹配问题)

    题目链接 https://leetcode.com/problems/valid-parentheses/?tab=Description   Problem: 括号匹配问题. 使用栈,先进后出!   ...

  10. 剑指offer题目记录

    1.如下为类型CMyString的声明,请为该类型添加赋值运算符函数. class CMyString { public: CMyString(char* pData = NULL); CMyStri ...