//query传参,使用name跳转

  this.$router.push({
       name:'second',
       query: {
         queryId:'20180822',
         queryName: 'query'
       }
  })

 //query传参,使用path跳转
   this.$router.push({
      path:'second',
      query: {
        queryId:'20180822',
        queryName: 'query'
      }
  })

//params传参,使用name跳转

   this.$router.push({
     name:'Lineitem',
     params: {
     name: 'admin',
     vade: row.orderId,
     mode: row.otherOrderId
    }
  })
//接收使用得参数
  mounted() {
     this.queryParam.phoneSerial = this.$route.params.node
     this.queryParam.otherOrderId = this.$route.params.mode
     console.log('this.$route.params', this.$route)
     this.queryParam.accountId = this.$route.params.code;
  },
console.log('this.$route.params', this.$route)
查看传值内容

使用query传值是在地址后面拼接,params传值是直接使用

需要注意的是:

params是路由的一部分,必须要在路由后面添加参数名。query是拼接在url后面的参数,没有也没关系。
params一旦设置在路由,params就是路由的一部分,如果这个路由有params传参,但是在跳转的时候没有传这个参数,会导致跳转失败或者页面会没有内容。

vue传参方式的更多相关文章

  1. vue的传参方式和router使用技巧

    vue传参方法一 1,路由配置 { path: '/describe/:id', name: 'Describe', component: Describe } 2,使用方法 // 直接调用$rout ...

  2. Vue Router路由导航及传参方式

    路由导航及传参方式 一.两种导航方式 ①:声明式导航 <router-link :to="..."> ②:编程式导航 router.push(...) 二.编程式导航参 ...

  3. Vue-router的传参方式和router使用技巧

    vue传参方法一 1,路由配置 { path: '/describe/:id', name: 'Describe', component: Describe } 2,使用方法 // 直接调用$rout ...

  4. angularjs简单实现$http.post(CORS)跨域及$http.post传参方式模拟jQuery.post

    1.开启angularjs的CORS支持 .config(function($httpProvider) { // CORS post跨域配置 $httpProvider.defaults.useXD ...

  5. react中的传参方式

    react是一个SPA模式,即组件嵌套租,在一个单页面的应用中组件间的数值传递是必不可少的,主要的传参方式大致有一下几种: 1,在挂载的地方给组件传参 ReactDOM.rander(<a na ...

  6. Web API中的传参方式

    在Restful风格的WebApi的里面,API服务的增删改查,分别对应着Http Method的Get / Post / Delete /Put,下面简单总结了Get / Post /Delete ...

  7. jQuery对象初始化的传参方式

    jQuery对象初始化的传参方式包括: 1.$(DOMElement) 2.$(' ... '), $('#id'), $('.class') 传入字符串, 这是最常见的形式, 这种传参数经常也传入第 ...

  8. Python函数定义及传参方式

    主要内容:     1.函数初识     2.函数传参方式        (1)位置参数        (2)默认参数        (3)关键参数        (4)非固定传参 一.函数初识 1. ...

  9. java 传参方式--值传递还是引用传递

    java 传参方式--值传递还是引用传递 参数是按值而不是按引用传递的说明 Java 应用程序有且仅有的一种参数传递机制,即按值传递.写它是为了揭穿普遍存在的一种神话,即认为 Java 应用程序按引用 ...

随机推荐

  1. SpringBoot -- 项目结构+启动流程

    一.简述: 项目结构 二.简述:启动流程 说springboot的启动流程,当然少不了springboot启动入口类 @SpringBootApplication public class Sprin ...

  2. SpringMVC 学习笔记(四)

    41. 尚硅谷_佟刚_SpringMVC_返回JSON.avi SpringMVC中使用@ResponseBody注解标注业务方法,将业务方法的返回值做成json输出给页面 导包: 除了一些sprin ...

  3. 蝙蝠算法(BA)学习笔记

    算法原理 蝙蝠能够在夜间或十分昏暗的环境中自由飞翔和准确无误地捕捉食物,是因为他们能够从喉头发出地超声脉冲回声来定位.受这一启发,Yang教授在2010年提出了蝙蝠算法(Bat Algorithm,B ...

  4. eclipse导入git项目

    复制项目的git路径 Eclipse打开 Git Repostitories 视图 弹出show view窗口 选择ok ,进入git repositories 视图窗口 我这里已经导入从我的git仓 ...

  5. 3分钟理解NMS非极大值抑制

    1. NMS被广泛用到目标检测技术中,正如字面意思,抑制那些分数低的目标,使最终框的位置更准: 2. 假如图片上实际有10张人脸,但目标检测过程中,检测到有30个框的位置,并且模型都认为它们是人脸,造 ...

  6. MongoDB快速入门教程 (4.3)

    4.3.Mongoose模块化 4.3.1.为什么要进行模块化拆分? 模块化拆分的目的是为了代码的复用,让整个项目的结构更加清晰,举个例子:当数据库中的集合变多的时候,例如有课程.订单.分类.教师等多 ...

  7. Spring Boot + Vue + Shiro 实现前后端分离、权限控制

    本文总结自实习中对项目的重构.原先项目采用Springboot+freemarker模版,开发过程中觉得前端逻辑写的实在恶心,后端Controller层还必须返回Freemarker模版的ModelA ...

  8. abp审计日志功能的关闭

    参考官网介绍:https://aspnetboilerplate.com/Pages/Documents/Audit-Logging

  9. 洛谷 P4910 帕秋莉的手环

    题意 多组数据,给出一个环,要求不能有连续的\(1\),求出满足条件的方案数 \(1\le T \le 10, 1\le n \le 10^{18}\) 思路 20pts 暴力枚举(不会写 60pts ...

  10. 区间DP之凸多边形的三角剖分

    题目 给定一具有N个顶点(从1到N编号)的凸多边形,每个顶点的权均已知.问如何把这个凸多边形划分成N-2个互不相交的三角形,使得这些三角形顶点的权的乘积之和最小? 输入 第一行 顶点数N(N<5 ...