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. js防止表单重复提交

    1.表单 <form id="addForm" onsubmit="getElementById('submitInput').disabled=true;retu ...

  2. Oracle查询锁表和解锁

    1.查询是否锁表 SELECT l.session_id sid, s.serial#, l.locked_mode,l.oracle_username, l.os_user_name,s.machi ...

  3. Nginx SSL配置

    一.SSL 原理 ① 客户端( 浏览器 )发送一个 https 请求给服务器② 服务器要有一套证书,其实就是公钥和私钥,这套证书可以自己生成,也可以向组织申请,服务器会把公钥传输给客户端③ 客户端收到 ...

  4. Android Studio 修改Logcat的颜色

    在Android Studio里面默认的logcat显示颜色是灰色的,不同等级的log是没有颜色分别的,如图 这一点远不如Eclipse好看,但是Android Studio的logcat的颜色其实也 ...

  5. LINUX分辨率修改

    上次说过了如何搭建LINUX虚拟机环境,但是完成之后存在很多问题,屏幕分辨太小就是其中之一. 为了让各位能有一个舒心的工作环境,现在就教给大家LINUX系统更改屏幕分辨率的两个办法. 一.鼠标操作 1 ...

  6. C++ template —— tuple(十三)

    本系列博文中我们使用同类容器(如数组类型)来阐述模板的强大威力,同时,C/C++还具有包含异类对象的能力.这里的异类指的是类型不同,或者结构不同.tuple就是这样的一个类模板,它能够用于聚集不同类型 ...

  7. 如何创建圆角 UITextField 与内阴影

    本文转自http://www.itstrike.cn/Question/9309fbd6-ef5d-4392-b361-a60fd0a3b18e.html 主要学习如何创建内阴影 我自定义 UITex ...

  8. PyQt4简单的窗口程序

    下面的程序显示了一个简单的小窗口. #!/usr/bin/python # -*- coding:utf-8 -*- import sys from PyQt4 import QtGui app = ...

  9. ECMAScript 面向对象JS学习笔记1

    1.对象的 prototype 属性,可以把它看成创建新对象所依赖的原型.===在我理解,就是prototype下设置的字段是唯一性的,共享性的,不管创建多少个对象,所处空间都是不变的,没有增加也没有 ...

  10. 【前端积累】Awesome初识

    前言 之所以要看这个,是因为在看到的一个网站里图表显示的全屏和缩小,anyway ,还是看一下咯~ 一.介绍 Font Awesome 字体为您提供可缩放矢量图标,它可以被定制大小.颜色.阴影以及任何 ...