1.query使用path和name传参都可以,而params只能使用name传参。

query传参:

页面:
this.$router.push({ path:'/city',name:'City', query: { cityid: this.Cityid,cityname:this.Cityname }})
路由:
{
path:'/city',
name:'City',
component:City
},
接受参数:
this.cityid = this.$route.query.cityid;

params传参:

页面:
this.$router.push({ name:'City', params: { cityid: this.Cityid,cityname:this.Cityname }})
路由:
{
path:'/city/:cityid/:cityname',
name:'City',
component:City
},
接受参数:
this.cityid = this.$route.params.cityid;

2.传参时query不需要再路由上配参数,params也可以不用配,

但是params不配的话,当用户刷新当前页面的时候,

参数就会消失。也就是说使用params不在路由配参数跳转,

只有第一次进入页面参数有效,刷新页面参数就会消失。

this.$router.push({ name:'City', query: { cityid: this.guessCityid,cityname:this.guessCityname }})

vue路由传参query和params的区别(详解!)的更多相关文章

  1. 路由传参 query 和 params

    vue路由传参分为两种情况: 一.query和params传参的区别: 1.query传参显示参数,params传参不显示参数,params相对于query来说较安全一点. 2.取值方法也有不同:qu ...

  2. vue路由传参的三种方式区别(params,query)

    最近在做一个项目涉及到列表到详情页的参数的传递,网上搜索一下路由传参,结合自己的写法找到一种适合自己的,不过也对三种写法都有了了解,在此记录一下 <ul class="table_in ...

  3. vue-router路由动态传参query和params的区别

    1.query方式传参和接收参数 //路由 { path: '/detail', //这里不需要参入参数 name: "detail", component: detail//这个 ...

  4. Vue路由传参的几种方式

    原 Vue路由传参的几种方式 2018年07月28日 23:52:40 广积粮缓称王 阅读数 12613   前言:顾名思义,vue路由传参是指嵌套路由时父路由向子路由传递参数,否则操作无效.传参方式 ...

  5. vue路由传参的三种方式以及解决vue路由传参页面刷新参数丢失问题

    最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$r ...

  6. vue路由传参刷新丢失

    没有系统学习过vue,以前使用路由传参都是直接this.$router.push({name:'main',params:{'id': 123}})的,没有在路由定义中配置参数,如下: router: ...

  7. vue路由传参的几种基本方式

    原文地址 this.$router.push跳转 现有如下场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取数据.父组件中: <li v-for="article i ...

  8. vue路由传参并跳转页面

    在vue项目中参数的传递可以使用本地缓存或者Vuex,那么vue能不能像小程序一样路由传参呢,显然是可以的而且非常简单 方式一:query传参 //传参 go(){ that.$router.push ...

  9. Vue-路由传参query与params

    注明:vue中 $router 和 $route 的区别 //$router : 是路由操作对象,只写对象 //$route : 路由信息对象,只读对象 //操作 路由跳转 this.$router. ...

随机推荐

  1. 关于undefind

    var undefined = "东方云游"; alert(undefined); // undefined 不一定为undefined ie8(包含ie8)以下会返回 " ...

  2. Next Instruction Access Intent Instruction

    Executing a Next Instruction Access Intent instruction by a computer. The processor obtains an acces ...

  3. i/o多路复用笔记

    1.用户空间和内核空间 操作系统的核心是内核,独立于普通的应用程序,可以访问受保护的内存空间,也可以访问底层硬件设备.为了保护用户进程不能直接操作内核,保证内核的安全,操作系统将虚拟空间划分为两部分, ...

  4. 简明Python3教程 10.模块

    简介 现在你已经知道通过定义函数可以在你的程序中复用代码.但当你想在你编写的其他程序中复用大量函数怎么办呢? 也许你可以猜到了,办法就是利用模块. 有各种编写模块的方式,但最简单的方式是创建一个以.p ...

  5. Linux性能测试 uptime命令

    uptime 命令用于查看服务器运行了多长时间以及有多少个用户登录,快速获知服务器的负荷情况. 以下是 uptime 的运行实例: :: up days, min, users, load avera ...

  6. 关于MySql链接url参数的设置 专题

    报错: Establishing SSL connection without server's identity verification is not recommended. According ...

  7. 自定义 DependencyProperty 与 RoutedEvent

    原文:自定义 DependencyProperty 与 RoutedEvent //自定义依赖属性 class MyBook : DependencyObject//依赖属性必须派生自Dependen ...

  8. LeapMotion Demo3

    原文:LeapMotion Demo3   从Github及其他论坛下载一些LeapMotion的例子,部分例子由于SDK的更新有一些小Bug, 已修复,感兴趣的可以下载:       http:// ...

  9. sql count(1)不要和查询数据混用 非常耗时

    count(1)不要和查询数据混用 非常耗时 例子: SELECT w.[PKID], COUNT(1) OVER() AS TotalCount FROM w WITH(NOLOCK) INNER ...

  10. 在IOS开发中使用GoogleMaps SDK

    一.申请一个免费的API KEY要使用GoogleMaps SDK,必须要为你的应用申请一个API KEY,API Key可以让你监视你的应用调用api的情况.api key是免费的,你可以在任何调用 ...