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 ...
随机推荐
- obj-c学习笔记
本文转载至 http://blog.csdn.net/c395565746c/article/details/7573793 当对象经过在dealloc方法处理时,该对象就已经处于已销毁状态,其它 ...
- [Sdoi2014]数数[数位dp+AC自动机]
3530: [Sdoi2014]数数 Time Limit: 10 Sec Memory Limit: 512 MBSubmit: 834 Solved: 434[Submit][Status][ ...
- maven assembly 配置详解
Maven Assembly插件介绍 博客分类: 项目构建 你是否想要创建一个包含脚本.配置文件以及所有运行时所依赖的元素(jar)Assembly插件能帮你构建一个完整的发布包. Assembl ...
- c# 怎么更改DataTable 中某列的值?
DataColumns dc = td.Columns["你的列"]; int inx = dc.Ordinal;td.Columns.Remove(dc);dc.DefaultV ...
- Java NIO Buffer(netty源码死磕1.2)
[基础篇]netty源码死磕1.2: NIO Buffer 1. Java NIO Buffer Buffer是一个抽象类,位于java.nio包中,主要用作缓冲区.Buffer缓冲区本质上是一块可 ...
- 我的Android进阶之旅------>Android中android:visibility 属性VISIBLE、INVISIBLE、GONE的区别
在Android开发中,大部分控件都有visibility这个属性,其属性有3个分别为"visible "."invisible"."gone&quo ...
- ABAP内表数据做层次XML输出
*&---------------------------------------------------------------------**& Report Z_BARRY ...
- Linux通过Shell对文件自动进行远程拷贝备份
在执行计划任务拷贝文件的时候,用scp命令需要输入密码,这里用公共密钥的方式实现密码的自动输入. 具体操作: 要求:把192.168.0.2机上的test.tar拷贝到192.168.0.3机器的上 ...
- 每天一个Linux命令(22)find命令_命令详解
find命令的一些常用参数的常用实例和用时的注意事项. 实例: (1)-name参数: 1)[sunjimeng@localhost home]$ find ~ -name & ...
- nginx 启动/停止/重启
启动: -c filename : set configuration file (default: conf/nginx.conf) [root@LinuxServer sbin]# /usr/ ...