//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. 明文暴露___JS前台加密,java后台解密实现

    1.前台JS <script type="text/javascript"> $(function() { $("#btn").click(func ...

  2. Python3-queue模块-同步队列

    Python3中的queue模块实现多生产者,多消费者队列,特别适用于多个线程间的信息的安全交换,主要有三个类 queue.Queue(maxsize=0) 构造一个FIFO(先进先出)的队列 que ...

  3. 在 Spring Boot 中使用 HikariCP 连接池

    上次帮小王解决了如何在 Spring Boot 中使用 JDBC 连接 MySQL 后,我就一直在等,等他问我第三个问题,比如说如何在 Spring Boot 中使用 HikariCP 连接池.但我等 ...

  4. 08 . Prometheus+Grafana监控haproxy+rabbitmq

    List CentOS7.3 prometheus-2.2.1.linux-amd64.tar.gz haproxy_exporter-0.11.0.linux-amd64.tar.gz 节点名 IP ...

  5. 如何解决TOP-K问题

    前言:最近在开发一个功能:动态展示的订单数量排名前10的城市,这是一个典型的Top-k问题,其中k=10,也就是说找到一个集合中的前10名.实际生活中Top-K的问题非常广泛,比如:微博热搜的前100 ...

  6. mac安装Hadoop,mysql,hive,sqoop教程

    在安装Hadoop,mysql,hive之前,首先要保证电脑上安装了jdk 一.配置jdk 1. 下载jdk http://www.oracle.com/technetwork/java/javase ...

  7. asp.net core 发布包含文件

    这样这个文件在发布的时候,就会包含进去了.

  8. C++ MFC 文件操作(新建,删除,剪切,复制,读数据,写数据,重命名)

    源文件:http://pan.baidu.com/s/1ve0hV 这是运行mfc缺失的dll动态链接库:http://pan.baidu.com/s/17pGlT 哈哈,我也是初接触C++,基础的什 ...

  9. JavaScript图形实例:迭代函数系统生成图形

    迭代函数系统(Iterated Function System,IFS)可以用来创建分形图案,它是分形理论的重要分支,也是分形图形处理中最富生命力而且最具有广阔应用前景的领域之一.这一工作最早可以追溯 ...

  10. 面试WEB前端如何才能通过?

    从事web前端工作七年时间,因为一直是非常热爱编程的,从小就有兴趣,大学就是学计算机的,技术应该比一般同龄的都要好一些,今天我想给大家讲述一下,目前想要做web前端开发,面试成功应该如何去学习,要具备 ...