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. linux 查看硬件信息

      1.查看内存槽数.那个槽位插了内存,大小是多少 dmidecode|grep -P -A5 "Memory\s+Device"|grep Size|grep -v Range ...

  2. 数字图像处理笔记与体会(一)——matlab编程基础

    最近开始学习数字图像处理,使用matlab实现,下面我就来记录笔记和体会,一方面是给大家提供参考,另一方面是防止我忘记了. 复习一下: 1.数字图像是用一个数字矩阵来表示的,数字阵列中的每个数字,表示 ...

  3. Elasticsearch 配置同义词

    配置近义词 近义词组件已经是elasticsearch自带的了,所以不需要额外安装插件,但是想要让近义词和IK一起使用,就需要配置自己的分析器了. 首先创建近义词文档 在config目录下 mkdir ...

  4. 【Linux】将终端的命令输出保存为txt文本文件

    Linux中的终端很方便,可以直接复制粘贴的. 之后开一个gedit文本编辑器,把复制到的内容粘贴就可以的. 不像windows的cmd控制台,需要先右键标题栏,选择编辑->全选/标记,在右键标 ...

  5. 在mac终端先打开mysql

    以打开xampp下的mysql为例: mysql执行文件是放在bin目录下的,不要cd bin后键入mysql,而应该直接在bin的上级目录时键入bin/mysql,这样才能进入到mysql命令行模式 ...

  6. eclipse安装maven时候如果conf文件夹中有setting文件则会以这个文件为主,如果自己设置了user的配置文件则会无效

    eclipse安装maven时候如果conf文件夹中有setting文件则会以这个文件为主,如果自己设置了user的配置文件则会无效

  7. How to Use Postman to Manage and Execute Your APIs

    How to Use Postman to Manage and Execute Your APIs Postman is convenient for executing APIs because ...

  8. sencha touch 在线实战培训 第一期 第七节

    2014.1.13晚上8点过一点开的课 本期培训一共八节,前三堂免费,后面的课程需要付费才可以观看. 本节内容:             非结构化数据传输 通过js调取phonegap实现图片采集.上 ...

  9. redmine创建新闻,自动发邮件给项目组所有成员

    redmine创建新闻,自动发邮件给项目组所有成员: 1.添加用户至公共项目内 2.配置系统邮件推送配置 3.检查用户接受推送配置 3.使用管理员账户发布新闻(不能自己发送自己) 4.查看邮件接受邮件

  10. Android电话拨号器_06

    在Android模拟器中开发时,有时需要模拟拨打电话功能,由于模拟器不能直接当做真机使用,所以我们需要再模拟器中模拟真机拨打电话,首先需要创建两个模拟器,当做两部Android手机来使用.由于Andr ...