初学vue的时候,不知道如何在方法中跳转界面并传参,百度过后,了解到两种方式,params 与 query。然后,错误就这么来了:

   router文件下index.js里面,是这么定义路由的:

{
path:"/detail",
name:"detail",
component:home
}

  我想用params来传参,是这么写的,嗯~

this.$router.push({
 path:"/detail",
 params:{
 name:'nameValue',
 code:10011
 }
});

  结果可想而知,接收参数的时候:

this.$route.params.code     //undefined

  这是因为,params只能用name来引入路由,下面是正确的写法:

this.$router.push({
name:"detail",
params:{
name:'nameValue',
code:10011
}
});

这回就对了,可以直接拿到传递过来的参数nameValue了。

说完了我的犯傻,下面整理一下这两者的差别:

1、用法上的

  刚才已经说了,query要用path来引入,params要用name来引入,接收参数都是类似的,分别是this.$route.query.name和this.$route.params.name。

注意接收参数的时候,已经是$route而不是$router了哦!!

2、展示上的

  query更加类似于我们ajax中get传参,params则类似于post,说的再简单一点,前者在浏览器地址栏中显示参数,后者则不显示

query:        

params:    

总结:刚学vue的时候,由于没有认真细致的看文档,导致在很多细小的坑里爬不上来,后来自己慢慢的走上正轨的时候,再去看文档,看到了很多原本可以避免的坑,想插死自己的心都有了!!

加油爬坑,共勉!

vue 路由传参 params 与 query两种方式的区别的更多相关文章

  1. 同一路由带参刷新,以及params和query两种方式传参的异同

    同一路由应该不叫跳转了吧,就先叫刷新好了. 需求及问题 今天做web课设有这样一个需求: 在导航栏中一项叫做教师队伍一级菜单下,有三个二级菜单,分别为教授.副教授.讲师.这三个二级菜单分别对应一个页面 ...

  2. Vue路由实现页面跳转的两种方式(router-link和JS)

    Vue.js 路由可以通过不同的 URL 访问不同的内容,实现多视图的单页 Web 应用 1.通过 <router-link> 实现 <router-link> 组件用于设置一 ...

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

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

  4. Redis持久化的两种方式和区别

    该文转载自:http://www.cnblogs.com/swyi/p/6093763.html Redis持久化的两种方式和区别 Redis是一种高级key-value数据库.它跟memcached ...

  5. 引入外部CSS的两种方式及区别

    1.CSS的两种引入方式 通过@import指令引入 @import指令是CSS语言的一部分,使用时把这个指令添加到HTML的一个<style>标签中: 要与外部的CSS文件关联起来,得使 ...

  6. Javascript绑定事件的两种方式的区别

    命名函数 <input type="button" onclick="check()" id="btn"/> <scrip ...

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

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

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

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

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

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

随机推荐

  1. luogu P2000 拯救世界

    嘟嘟嘟 题目有点坑,要你求的多少大阵指的是召唤kkk的大阵数 * lzn的大阵数,不是相加. 看到这个限制条件,显然要用生成函数推一推. 比如第一个条件"金神石的块数必须是6的倍数" ...

  2. 最简单例子图解JVM内存分配和回收(转)

    本文转自http://ifeve.com/a-simple-example-demo-jvm-allocation-and-gc/ http://www.idouba.net/a-simple-exa ...

  3. leetcode 199. Binary Tree Right Side View 、leetcode 116. Populating Next Right Pointers in Each Node 、117. Populating Next Right Pointers in Each Node II

    leetcode 199. Binary Tree Right Side View 这个题实际上就是把每一行最右侧的树打印出来,所以实际上还是一个层次遍历. 依旧利用之前层次遍历的代码,每次大的循环存 ...

  4. QT中PRO文件写法的详细介绍

    学习Qt时,发现有些知识看了不经常用就忘了,以下是书本上写的一些关于qmake的相关知识,自己看后,打算把一些经常用到的记下来,整理整理. Qt程序一般使用Qt提供的qmake工具来编译. qmake ...

  5. 【Codeforces 1132E】Knapsack

    Codeforces 1132 E 题意:给\(cnt_i\)个\(i\)(\(1\leq i\leq 8\)),问用这些数所能构成的最大的不超过\(W\)的数. 思路:随机+贪心... 我们考虑将贪 ...

  6. 关于x210开发板和主机、虚拟机ping通问题

    关于x210开发板和主机.虚拟机ping通问题: 步骤: 1.关闭 Ubuntu.关闭VMware软件: 2.打开 网络连接,设置 以太网 IP地址,并确认使用的网卡 3.以管理员身份打开VMware ...

  7. 加解密工具类(含keystore导出pfx)

    java代码如下: package sign; import java.io.FileInputStream; import java.io.FileOutputStream; import java ...

  8. MonkeyRunner 模块

    用python编写脚本   1.导入模块: MonkeyRunner MonkeyDevice MonkeyImage ps:如果给导入模块起别名,就应该使用别名,而不能使用原名,否则会出现错误. f ...

  9. Luogu P2657 [SCOI2009]windy数

    一道比较基础的数位DP,还是挺套路的. 首先看题,发现这个性质和数的大小无关,因此我们可以直接数位DP,经典起手式: \(f[a,b]=f(b)-f(a-1)\) 然后考虑如何求解\(f(x)\).我 ...

  10. [JSOI2016]病毒感染[dp]

    题意 有 \(n​\) 个村庄按标号排列,每个村庄有一个死亡速度 \(a_i​\) 表示每天死 \(a_i​\) 人(除非你治好这个村庄). 你从 1 号村庄出发,每天可以选择向相邻的村庄进发或者治愈 ...