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 ...
随机推荐
- 在fc6上搭tftpd
公司的开发环境依然停留在fc6上,,,,对..很旧,旧到想死. 我在没有进一步熟悉ubuntu的基础上,为了保持ABI一致. 只能依旧在FC6 上开发. 可是现在发现开发完成,我要在fc6上文件到wi ...
- nginx学习之反向代理篇(六)
在本节,你将学会: --如何根据不同的协议,将请求转发到后端服务器: --修改发送到后端服务器的请求头: --以及配置是否buffering从后端服务器返回来的响应. 1. 将请求转发给后端服务器 当 ...
- 【python】-- 函数非固定参数,返回值(return)
函数非固定参数 1.默认参数: 代码如下: def information_register(name,age,country,sex): print("----注册信息------&quo ...
- Linux基础系列:常用命令(8)_shell script
一.什么是shell script 将OS命令堆积到可执行的文件里,由上至下的顺序执行文本里的OS命令 就是脚本了. 再加上些智能(条件/流控)控制,就变成了智能化脚本了 二.变量命名规则 以字母或下 ...
- Shiro:学习笔记(2)——授权
Shiro:学习笔记(2)——授权 Shiro的三种授权方式 编程式: Subject subject = SecurityUtils.getSubject(); if(subject.hasRole ...
- HDU - 2701 Lampyridae Teleportae 【模拟】
题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=2701 题意 有一个萤火虫会闪现 一个人 也会闪现 给出 这个人的起始位置 和他能够闪现的距离 然后依次 ...
- 每天一个Linux命令(8)cat命令
cat命令连接文件并打印到标准输出设备上,cat经常用来显示文件的内容,类似于下的type命令. 注意:当文件较大时,文本在屏幕上迅速闪过(滚屏),用户往往看不清所显示的内容.因此,一般用more等命 ...
- curl简单封装 get post
Curl.php <?php /** * Class Curl curl简单封装 get post */ class Curl { /** * @brief get请求 * @param $ur ...
- build-essential软件包
linux操作系统上面开发程序, 光有了gcc 是不行的 它还需要一个 build-essential软件包 作用是提供编译程序必须软件包的列表信息 也就是说 编译程序有了这个软件包 它才知道 头文件 ...
- POJ 3928 Ping pong(树状数组+两次)
题意:每个人都有一个独特的排名(数字大小)与独特的位置(从前往后一条线上),求满足排名在两者之间并且位置也在两者之间的三元组的个数 思路:单去枚举哪些数字在两者之间只能用O(n^3)时间太高,但是可以 ...