很多人都知道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. obj-c学习笔记

    本文转载至 http://blog.csdn.net/c395565746c/article/details/7573793   当对象经过在dealloc方法处理时,该对象就已经处于已销毁状态,其它 ...

  2. [Sdoi2014]数数[数位dp+AC自动机]

    3530: [Sdoi2014]数数 Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 834  Solved: 434[Submit][Status][ ...

  3. maven assembly 配置详解

    Maven Assembly插件介绍 博客分类: 项目构建   你是否想要创建一个包含脚本.配置文件以及所有运行时所依赖的元素(jar)Assembly插件能帮你构建一个完整的发布包. Assembl ...

  4. c# 怎么更改DataTable 中某列的值?

    DataColumns dc = td.Columns["你的列"]; int inx = dc.Ordinal;td.Columns.Remove(dc);dc.DefaultV ...

  5. Java NIO Buffer(netty源码死磕1.2)

    [基础篇]netty源码死磕1.2:  NIO Buffer 1. Java NIO Buffer Buffer是一个抽象类,位于java.nio包中,主要用作缓冲区.Buffer缓冲区本质上是一块可 ...

  6. 我的Android进阶之旅------>Android中android:visibility 属性VISIBLE、INVISIBLE、GONE的区别

    在Android开发中,大部分控件都有visibility这个属性,其属性有3个分别为"visible "."invisible"."gone&quo ...

  7. ABAP内表数据做层次XML输出

      *&---------------------------------------------------------------------**& Report  Z_BARRY ...

  8. Linux通过Shell对文件自动进行远程拷贝备份

    在执行计划任务拷贝文件的时候,用scp命令需要输入密码,这里用公共密钥的方式实现密码的自动输入. 具体操作: 要求:把192.168.0.2机上的test.tar拷贝到192.168.0.3机器的上 ...

  9. 每天一个Linux命令(22)find命令_命令详解

        find命令的一些常用参数的常用实例和用时的注意事项.     实例:     (1)-name参数: 1)[sunjimeng@localhost home]$ find ~ -name & ...

  10. nginx 启动/停止/重启

    启动: -c filename   : set configuration file (default: conf/nginx.conf) [root@LinuxServer sbin]# /usr/ ...