很多人都知道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 传参的区别的更多相关文章

  1. Vue Router的params和query传参的使用和区别

    vue页面跳转有两种方式分别是:name和path this.$router.push({name: 'HelloWorld2}) this.$router.push({path: '/hello-w ...

  2. vue params和query传参区别

    参考地址:https://blog.csdn.net/bluefish_flying/article/details/81011230 router.js中 路由设置这里, 当你使用params方法传 ...

  3. (转)vue router 如何使用params query传参,以及有什么区别

    写在前面: 传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,喜欢的可以点波赞 ...

  4. vue router 如何使用params query传参,以及有什么区别

    写在前面: 传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,喜欢的可以点波赞 ...

  5. 记录下mybatis中#{}和${}传参的区别

    最近在用mybatis,之前用过ibatis,总体来说差不多,不过还是遇到了不少问题,再次记录下, 比如说用#{},和 ${}传参的区别, 使用#传入参数是,sql语句解析是会加上"&quo ...

  6. (后端)Mybatis中#{}和${}传参的区别及#和$的区别小结(转)

    原文地址:https://www.cnblogs.com/zqr99/p/8094234.html 最近在用mybatis,之前用过ibatis,总体来说差不多,不过还是遇到了不少问题,再次记录下, ...

  7. Mybatis中#{}和${}传参的区别及#和$的区别小结

    最近在用mybatis,之前用过ibatis,总体来说差不多,不过还是遇到了不少问题,再次记录下, 比如说用#{},和 ${}传参的区别, 使用#传入参数是,sql语句解析是会加上"&quo ...

  8. vue-router 使用query传参跳转了两次(首次带参数,跳转到了不带参数)

    问题: 在做项目的过程中,使用query传参数,发现跳转过程中第一次有参数,但是路由马上又跳转了一次,然后 ?和它之后的参数都不见了 问题分析: 因为路由加载了两次 解决办法: ·1. 找到总的 la ...

  9. vue-router4 |name的作用|query传参|parmas传参|动态路由参数|命名视图|别名alias|前置路由守卫|路由过渡效果|滚动行为

    vue-router4 出现 No match found for location with path "/" #### router/index.ts文件 import { c ...

随机推荐

  1. 使用Zxing.net实现asp.net mvc二维码功能

    新建一个html辅助类 public static class HtmlHelperExtensions { , , ) { var barcodeWriter = new BarcodeWriter ...

  2. [置顶] 2013_CSUST暑假训练总结

    2013-7-19 shu 新生训练赛:母函数[转换成了背包做的] shuacm 题目:http://acm.hdu.edu.cn/diy/contest_show.php?cid=20083总结:h ...

  3. 九度OJ 1342:寻找最长合法括号序列II (DP)

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:898 解决:366 题目描述: 假如给你一个由'('和')'组成的一个随机的括号序列,当然,这个括号序列肯定不能保证是左右括号匹配的,所以给 ...

  4. MediaRecorder实现微信、QQ、人人、易信等语音录制功能工具:MediaUtilAPI

    本文介绍使用MediaRecorder进行录制音频.录制视频学习,熟悉MediaRecorder执行流程,通过简单的Demo结合解释运行效果,最后封装MediaRecorder的API工具,实现常见比 ...

  5. python基础7 ---python函数

    python基础知识 一.闭包函数 1.闭包函数的定义:在一个内部函数中,在对外部作用域(但不是在全局作用域)的变量进行引用,那么内部函数就被认为是闭包. 2.闭包函数的特点:自带作用域和延迟计算 补 ...

  6. iOS 当前应用或者浏览器中 唤起 手机其他应用

    这种方法 是 产品很常见的需求,关键 是在info.plist  URL types 设置对应属性 比如 里面 子属性 URL identifier  设置成 bundle id   //设置应用指向 ...

  7. ubuntu中文语言环境下把系统中文文件夹更改回英文文件夹

    更改系统语言为“汉语(中国)”后,在主文件夹下的系统默认文件夹名称也被改成了中文, 这样的话,使用命令行终端进行入文件夹很不方便,所以可以把文件夹名称从中文改回英文. 打开终端,在终端中输入命令:ex ...

  8. Logstash的插件

    Logstash的插件: input插件: File:从指定的文件中读取事件流: 使用FileWatch(Ruby Gem库)监听文件的变化. .sincedb:记录了每个被监听的文件的inode, ...

  9. Shiro-权限认证(授权)-编程式授权

    权限认证 权限认证也就是访问控制,即在应用中控制谁能访问哪些资源 权限认证核心要素 权限 : 即操作资源的权利,比如访问某个页面,以及对某个模块的数据的添加,修改,删除,查看的权利 角色 : 是权限的 ...

  10. 大话设计模式--适配器模式 Adapter -- C++实现实例

    1.适配器模式: 将一个类的接口转换为客户希望的另一个接口,使得原来由于接口不能一起工作的那些类一起工作. 适配器模式一般用于希望复用一些现存的类,但是接口又与复用环境要求不一致的情况. 适配器模式分 ...