vue 路由传参 params 与 query两种方式的区别
初学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两种方式的区别的更多相关文章
- 同一路由带参刷新,以及params和query两种方式传参的异同
同一路由应该不叫跳转了吧,就先叫刷新好了. 需求及问题 今天做web课设有这样一个需求: 在导航栏中一项叫做教师队伍一级菜单下,有三个二级菜单,分别为教授.副教授.讲师.这三个二级菜单分别对应一个页面 ...
- Vue路由实现页面跳转的两种方式(router-link和JS)
Vue.js 路由可以通过不同的 URL 访问不同的内容,实现多视图的单页 Web 应用 1.通过 <router-link> 实现 <router-link> 组件用于设置一 ...
- Vue路由传参的几种方式
原 Vue路由传参的几种方式 2018年07月28日 23:52:40 广积粮缓称王 阅读数 12613 前言:顾名思义,vue路由传参是指嵌套路由时父路由向子路由传递参数,否则操作无效.传参方式 ...
- Redis持久化的两种方式和区别
该文转载自:http://www.cnblogs.com/swyi/p/6093763.html Redis持久化的两种方式和区别 Redis是一种高级key-value数据库.它跟memcached ...
- 引入外部CSS的两种方式及区别
1.CSS的两种引入方式 通过@import指令引入 @import指令是CSS语言的一部分,使用时把这个指令添加到HTML的一个<style>标签中: 要与外部的CSS文件关联起来,得使 ...
- Javascript绑定事件的两种方式的区别
命名函数 <input type="button" onclick="check()" id="btn"/> <scrip ...
- vue路由传参的三种方式区别(params,query)
最近在做一个项目涉及到列表到详情页的参数的传递,网上搜索一下路由传参,结合自己的写法找到一种适合自己的,不过也对三种写法都有了了解,在此记录一下 <ul class="table_in ...
- vue路由传参的三种方式以及解决vue路由传参页面刷新参数丢失问题
最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$r ...
- vue路由传参的几种基本方式
原文地址 this.$router.push跳转 现有如下场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取数据.父组件中: <li v-for="article i ...
随机推荐
- Matlab 学习视频集合
http://www.ilovematlab.cn/thread-22239-1-1.html
- [转]Ubuntu 常用解压与压缩命令
.tar 文件(注:tar是打包,不是压缩!) # 仅打包,并非压缩 tar -xvf FileName.tar # 解包 tar -cvf FileName.tar DirName # 将DirNa ...
- BMP280 driver对接单片机I2C或者SPI总线接口
1:登录github网站搜BMP280,找到 BoschSensortec/BMP280_driver 2:gitclone或者download zip都可以,把驱动下载到本地,记得fork哦! 3: ...
- (转)PostgreSQL pg_dump&psql 数据的备份与恢复
转自:https://www.cnblogs.com/chjbbs/p/6480687.html Usage: pg_dump [OPTION]... [DBNAME] 数据库名放最后,不指定默认 ...
- c#对联合体的封装
https://blog.csdn.net/u012846041/article/details/37518313 标准C或者C++中均提供关键字定义联合结构,C#中未提供类似的关键字,但仍然可以定义 ...
- 生成、查看文件的MD5、SHA、SHA256值
生成文件的MD5.SHA.SHA256 Linux系统生成MD5.SHA.SHA256 md5sum file1.zip >> MD5.txt sha1sum file1.zip > ...
- 搭建SpringBoot+dubbo+zookeeper+maven框架(一)
这几天项目还没来,所以就自己试着参考网上的一些资料,搭建了一个SpringBoot+dubbo+zookeeper+maven框架,网上参考的很多资料照着他们一步一步搭建,最后很多都运行不通,很是郁闷 ...
- Oracle 社区动态、中文讲座,最佳实践
https://community.oracle.com/thread/3789691https://community.oracle.com/community/support/%E4%B8%AD% ...
- Web应用实例:音频可视化
准备 语言:TypeScript 工具:Visual Studio Code 演示:Audio Visualiazer 小明告诉我,他希望打开一个网页,立即听到他喜欢的音乐,如果有视觉特效就更棒了. ...
- 过渡与动画 - 缓动效果&基于贝塞尔曲线的调速函数
难题 给过渡和动画加上缓动效果是一种常见的手法(比如具有回弹效果的过渡过程)是一种流行的表现手法,可以让界面显得更加生动和真实:在现实世界中,物体A点到B点往往也是不完全匀速的 以纯技术的角度来看,回 ...