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. 第7章 Ajax数据爬取

    Ajax 简介 Ajax 分析方法 Ajax 结果提取

  2. 第二篇:Hadoop 在Ubuntu Kylin系统上的搭建[图解]

    前言 本文介绍如何在Ubuntu Kylin操作系统上搭建Hadoop平台. 配置 1. 操作系统: Ubuntu Kylin 14.04 2. 编程语言: JDK 1.8 3. 通信协议: SSH ...

  3. react设置多个className

    在一个元素上设置样式,有一个固定的样式,然后还有一个使用三元运算符根据条件添加的样式. 比如说有一个固定样式"title": <div className="tit ...

  4. 使用react进行父子组件传值

    在单页面里面,父子组件传值是比较常见的,之前一直用vue开发,今天研究了一下react的父子组件传值,和vue差不多的思路,父组件向子组件传值,父通过初始state,子组件通过this.props进行 ...

  5. 编写java的时候出现“编码GBK的不可映射字符”

    今天在编写文件的时候,使用 javac ***.java 但是java文件里面会出现一些中文的信息,So:会报错 方法: 加参数-encoding UTF-8 例如:javac -encodig UT ...

  6. 【技术分享会】 iOS开发简述

    前言 Objective-C(简称OC)也是面向对象的编程语言,运用的许多面向对象的编程思想和C# . Java .C++等变成语言都是相通的: 本次技术讲座主要讲一些设计模式.设计思想等计算机语言通 ...

  7. 【十大算法实现之KNN】KNN算法实例(含测试数据和源码)

    KNN算法基本的思路是比较好理解的,今天根据它的特点写了一个实例,我会把所有的数据和代码都写在下面供大家参考,不足之处,请指正.谢谢! update:工程代码全部在本页面中,测试数据已丢失,建议去UC ...

  8. Python tkinter 控件更新信息

    下面几个例子关于tkinter界面更新的,简单易懂,分享一下. 例子_1: 代码_1: from tkinter import Tk, Checkbutton, Label from tkinter ...

  9. Linux系统启动内幕

    经过对Linux系统有了一定了解和熟悉后,想对其更深层次的东西做进一步探究.这当中就包括系统的启动流程.文件系统的组成结构.基于动态库和静态库的程序在执行时的异同.协议栈的架构和原理.驱动程序的机制等 ...

  10. Amazon ec2 改成密码登录方式

    sudo passwd rootsu rootvi /etc/ssh/sshd_config"# PasswordAuthentication yes" uncommentsbin ...