params 和 query 传参的区别
很多人都知道params 和 query 都可以在页面跳转的时候传递参数。
query更加类似于我们ajax中get传参,params则类似于post,说的再简单一点,前者在浏览器地址栏中显示参数,后者则不显示
最近有一个需求,比如详情页,要求按F5刷新完后数据还是能正常展示,详情页是在created后用ID请求。
如果是用query 传递过来的id,在this.$route,上会一直存在。
但是如果用params的时候,如果不做别的配置,直接在路由跳转的时间加params,F5刷新数据可能就不存在了。
如果一定要用params也可以,在router文件的 path 后面 + “/:id”,这样页面F5刷新后ID还是在router中。
如果是单独的详情页这样也是可以的,但是如果新增和编辑都是跳转同一个路由呢,这样就会报错了,因为编辑要请求详情,就需要ID,但是新增的时候是没有ID的
这时候就需要 path 后面 + “/:id?”,也就是id后面加一个“?”,和正则的意思一样,可有可无。这样就不会报错了。
个人还是建议用 query ,因为它不需要改变 path规则。
params 和 query 传参的区别的更多相关文章
- Vue Router的params和query传参的使用和区别
vue页面跳转有两种方式分别是:name和path this.$router.push({name: 'HelloWorld2}) this.$router.push({path: '/hello-w ...
- vue params和query传参区别
参考地址:https://blog.csdn.net/bluefish_flying/article/details/81011230 router.js中 路由设置这里, 当你使用params方法传 ...
- (转)vue router 如何使用params query传参,以及有什么区别
写在前面: 传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,喜欢的可以点波赞 ...
- vue router 如何使用params query传参,以及有什么区别
写在前面: 传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,喜欢的可以点波赞 ...
- 记录下mybatis中#{}和${}传参的区别
最近在用mybatis,之前用过ibatis,总体来说差不多,不过还是遇到了不少问题,再次记录下, 比如说用#{},和 ${}传参的区别, 使用#传入参数是,sql语句解析是会加上"&quo ...
- (后端)Mybatis中#{}和${}传参的区别及#和$的区别小结(转)
原文地址:https://www.cnblogs.com/zqr99/p/8094234.html 最近在用mybatis,之前用过ibatis,总体来说差不多,不过还是遇到了不少问题,再次记录下, ...
- Mybatis中#{}和${}传参的区别及#和$的区别小结
最近在用mybatis,之前用过ibatis,总体来说差不多,不过还是遇到了不少问题,再次记录下, 比如说用#{},和 ${}传参的区别, 使用#传入参数是,sql语句解析是会加上"&quo ...
- vue-router 使用query传参跳转了两次(首次带参数,跳转到了不带参数)
问题: 在做项目的过程中,使用query传参数,发现跳转过程中第一次有参数,但是路由马上又跳转了一次,然后 ?和它之后的参数都不见了 问题分析: 因为路由加载了两次 解决办法: ·1. 找到总的 la ...
- vue-router4 |name的作用|query传参|parmas传参|动态路由参数|命名视图|别名alias|前置路由守卫|路由过渡效果|滚动行为
vue-router4 出现 No match found for location with path "/" #### router/index.ts文件 import { c ...
随机推荐
- Windows 下Node.js开发环境配置
第一步:安装VirtualBox(以管理员身份安装) 1.安装完成后,打开VirtualBox,点击“新建”按钮,输入信息,“下一步”(名称可任意) 2.设置内存为1024MB,“下一步”—>“ ...
- 【CodeM初赛A轮】D 分解质因数+暴力
题目描述树链是指树里的一条路径.美团外卖的形象代言人袋鼠先生最近在研究一个特殊的最长树链问题.现在树中的每个点都有一个正整数值,他想在树中找出最长的树链,使得这条树链上所有对应点的值的最大公约数大于1 ...
- H - Funny Car Racing
H - Funny Car Racing Time Limit:1000MS Memory Limit:0KB 64bit IO Format:%lld & %llu Desc ...
- The space of such functions is known as a reproducing kernel Hilbert space.
Reproducing kernel Hilbert space Mapping the points to a higher dimensional feature space http://www ...
- 阿里云+LAMP环境配置
1. 准备好一键Linux环境的脚本: http://dwz.cn/6Nlexm 2. 运行命令:# yum install lynx tree nmap sysstat lrzsz dos2unix ...
- Android笔记之使用ZXing扫描二维码
ZXing发布版下载地址:https://github.com/zxing/zxing/releases 为了能让官方Demo跑起来,先把ZXing核心部分core复制到自己的工程里 还要把andro ...
- as2解析json
as2写的json解析,带容错,如果要做格式检查,得自己修改了,直接贴代码 //--------------------------------------------------json解析---- ...
- Swift学习 --- 2.1基础部分
1.swift 能够省去; 2.println与print的差别就是一个能够换行一个不能够 3.swift省去了.h与.m 直接一个swift文件 4.元组能够返回多个值,元组(tuples)把多个值 ...
- 拉普拉斯分布(Laplace distribution)
拉普拉斯分布的定义与基本性质 其分布函数为 分布函数图 其概率密度函数为 密度函数图 拉普拉斯分布与正太分布的比较 从图中可以直观的发现拉普拉斯分布跟正太分布很相似,但是拉普拉斯分布比正太分布有尖的峰 ...
- mysql设置指定ip远程访问连接的方法
本文实例讲述了mysql设置指定ip远程访问连接的方法,分享给大家供大家参考.具体实现方法如下: 1. 授权用户root使用密码jb51从任意主机连接到mysql服务器: 复制代码 代码如下: GRA ...