//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. vue入门的第一天:v-clock、v-text、v-html的使用

    vue入门的第一天 1. v-cloak v-cloak可以解决插值闪烁问题(防止代码被人看见),在元素里加入 v-cloak即可 html: <p v-cloak>{{msg}}< ...

  2. 解决 React Native Android:app:validateSigningRelease FAILED 错误

    RN 运行的时候报这个错这咋办:

  3. spring cloud config 配置文件更新

    Spring Cloud Config Server 作为配置中心服务端 拉取配置时更新 git 仓库副本,保证是最新结果 支持数据结构丰富,yml, json, properties 等 配合 eu ...

  4. ceph集成openstack cinder

    本环境ceph已经搭建,ceph搭建麻烦见本博客的其他文章 1 在cinder-volume节点安装ceph client yum install -y ceph-common 注意:glance要安 ...

  5. 手把手教你把web应用丢到服务器上(单页应用+ 服务端渲染)

    前两篇文章中,我分别介绍了框架的搭建利用vue-cli + vant搭建一个移动端开发模板,并且把项目中axios请求和vuex的用法做了简要的介绍如何在项目里管理好axios请求与vuex.在这两篇 ...

  6. offer到手!美团Java岗四面(多线程+redis+JVM+数据库)

    美团Java岗四面,已拿offer,前三面都是技术面,第四面是HR面,下面是面试题! 美团Java岗一面(技术,电话面,约40分钟) 自我介绍. 项目介绍. 了解过redis源码及redis集群么? ...

  7. win10 64位 MySQL 8.0 下载与安装

    免安装版(超级棒的教程): 安装只需 Download .zip压缩文件 卸载只需 Delete 解压文件即可 https://blog.csdn.net/hzxOnlineOk/article/de ...

  8. Python3笔记022 - 5.1 字符串常用操作

    第5章 字符串及正则表达式 5.1 字符串常用操作 5.1.1 拼接字符串 使用+运算符可完成多个字符串的拼接,产生一个新的字符串对象. str1 = "2020年07月06日是" ...

  9. Python爬虫教程(16行代码爬百度)

    最近在学习python,不过有一个正则表达式一直搞不懂,自己直接使用最笨的方法写出了一个百度爬虫,只有短短16行代码.首先安装必背包: pip3 install bs4 pip3 install re ...

  10. 解决idea中“系统找不到指定路径”的问题

    有时在其他工具中运行正确的项目,在idea中运行会报路径找不到的错误. 该路径是相对路径的情况下,很有可能是因为idea中的工作空间没有选择正确而导致的.设置工作空间: 该目录没有配置到你运行的模块, ...