//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. elasticSearch中集群状态的guan'l

    es中集群出现上面的问题一般是磁盘空间不够引起的,就是node节点所在的磁盘空间不足引起的 es整个集群放在c盘,都快满了 说明es的磁盘已经快被使用完了,我们可以临时更新下磁盘空间大小 修改 ES分 ...

  2. 黎活明8天快速掌握android视频教程--18_在SQLite中使用事务

    1 所谓的事业就是一系列的操作 比如:执行转账操作:将personid=1的账户转账10元到personid=2的账号中 所以的一系列操作就是:personid=1的账户钱要减少10元 personi ...

  3. Idea激活JRebel

    选择license激活 UUID 生成地址: http://www.uuid.online 激活地址 http://jrebel-license.jiweichengzhu.com/ UUID

  4. IOT设备SmartConfig实现

    一般情况下,IOT设备(针对wifi设备)在智能化过程中需要连接到家庭路由.但在此之前,需要将wifi信息(通常是ssid和password,即名字和密码)发给设备,这一步骤被称为配网.移动设备如An ...

  5. 为什么总是无法访问VMware内的web服务?

    除了防火墙的设置,很可能时因为你的Web服务监听的时127.0.0.1地址,构成了本机回环,只能本机访问的原因. 启动服务的时候可以尝试指定hostname为0.0.0.0或者你想监听的IP地址. [ ...

  6. WSL配置高翔vslam环境配置流水账

    1 安装参考博文链接:https://www.cnblogs.com/dalaska/p/12802384.html 2 Ubuntu 16.04地址:https://www.microsoft.co ...

  7. 硬刚 lodash 源码之路,compact & concat

    前置 本篇随笔包含 _.compact 和 _.concat 及其依赖的工具函数. 你可能需要一些 JavaScript 基础知识才能看懂一些没有注释的细节. compact _.compact(ar ...

  8. web网页多语言的实现方案_前端实现多语言切换

    实现的效果 需要在web中实现多语言的切换,当用户语言切换完成后下次重新打开网页,也是上次设置的语言进行显示. 资源网站搜索大全https://55wd.com 实现步骤 1.在用户点击切换语言后,把 ...

  9. 线性DP之机器分配

    题目大意 自己瞅 (懒得打了) 思路 前面是很简单的线性dp,后面是模拟递归输出方案, 模拟递归可以设ny为机器数机器数,nx表示第nx个公司,tot为总盈利,那么则有\(a[nx][i]+dp[nx ...

  10. Vue中computed的本质及与methods的区别

    一.computed的本质? computed为什么不像methods一样加小括号使用? 正常使用computed方式 运行结果 至于为什么computed为什么不像methods一样使用小括号调用, ...