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. ubuntu11.10 64bit 编译android 4.0

    前言: 据说google内部使用的的ubuntu版本始终是10.4, 而我一直使用的编译2.3Gingerbread的 11.04下补充安装uuid-dev和liblzo2-dev两个库就可以直接编译 ...

  2. error:1407742E:SSL routines:SSL23_GET_SERVER_HELLO:tlsv1 alert protocol version

    更新的软件可以解决 TortoiseGit-preview-2.5.7.0-20180127-b2d00f8-64bit.msi和Git-2.16.2-64-bit.exe. 链接地址为: https ...

  3. Handler基本用法

    片断一:mHandler = new Handler();mRunnable = new Runnable() { @Override public void run() { currentPosit ...

  4. iOS中UIView翻转效果实现

    本文转载至  http://baishiyun.blog.163.com/blog/static/13057117920148228261747/ 新建一个view-based模板工程,在ViewCo ...

  5. SqlServer中循环查询结果集

    ); begin ; open c_test_main;--打开游标 --开始循环 begin fetch next from c_test_main into @id,@value; --赋值到变量 ...

  6. 【大数据系列】使用api修改hadoop的副本数和块大小

    package com.slp.hdfs; import org.apache.commons.io.output.ByteArrayOutputStream; import org.apache.h ...

  7. word2010没有“标题2、标题3”样式的解决办法

    word2010没有“标题2.标题3”样式的解决办法 很多人用word的时候都喜欢用“标题1”“标题2”等样式来定义他们的文档标题,被这样定义的标题会出现在导航窗格中,使浏览起来非常方便.但是最近我发 ...

  8. sencha touch 分享到微博扩展

    扩展代码: /* *分享到微博 */ Ext.define('ux.WeiboPicker', { extend: 'Ext.Picker', xtype: 'weiboPicker', config ...

  9. 配置Mac漂亮的Shell--Iterm2+OhMyZSH+Agnoster

    安装包管理器 首先当然是解决包管理的问题,Mac下面是Homebrew的天下了 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubuserco ...

  10. Unity3D 加密 Assembly-CSharp.dll (Android平台) 防止反编译【转】

    转自 http://blog.csdn.net/u013108312/article/details/54234439