很多人都知道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. 在fc6上搭tftpd

    公司的开发环境依然停留在fc6上,,,,对..很旧,旧到想死. 我在没有进一步熟悉ubuntu的基础上,为了保持ABI一致. 只能依旧在FC6 上开发. 可是现在发现开发完成,我要在fc6上文件到wi ...

  2. nginx学习之反向代理篇(六)

    在本节,你将学会: --如何根据不同的协议,将请求转发到后端服务器: --修改发送到后端服务器的请求头: --以及配置是否buffering从后端服务器返回来的响应. 1. 将请求转发给后端服务器 当 ...

  3. 【python】-- 函数非固定参数,返回值(return)

    函数非固定参数 1.默认参数: 代码如下: def information_register(name,age,country,sex): print("----注册信息------&quo ...

  4. Linux基础系列:常用命令(8)_shell script

    一.什么是shell script 将OS命令堆积到可执行的文件里,由上至下的顺序执行文本里的OS命令 就是脚本了. 再加上些智能(条件/流控)控制,就变成了智能化脚本了 二.变量命名规则 以字母或下 ...

  5. Shiro:学习笔记(2)——授权

    Shiro:学习笔记(2)——授权 Shiro的三种授权方式 编程式: Subject subject = SecurityUtils.getSubject(); if(subject.hasRole ...

  6. HDU - 2701 Lampyridae Teleportae 【模拟】

    题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=2701 题意 有一个萤火虫会闪现 一个人 也会闪现 给出 这个人的起始位置 和他能够闪现的距离 然后依次 ...

  7. 每天一个Linux命令(8)cat命令

    cat命令连接文件并打印到标准输出设备上,cat经常用来显示文件的内容,类似于下的type命令. 注意:当文件较大时,文本在屏幕上迅速闪过(滚屏),用户往往看不清所显示的内容.因此,一般用more等命 ...

  8. curl简单封装 get post

    Curl.php <?php /** * Class Curl curl简单封装 get post */ class Curl { /** * @brief get请求 * @param $ur ...

  9. build-essential软件包

    linux操作系统上面开发程序, 光有了gcc 是不行的 它还需要一个 build-essential软件包 作用是提供编译程序必须软件包的列表信息 也就是说 编译程序有了这个软件包 它才知道 头文件 ...

  10. POJ 3928 Ping pong(树状数组+两次)

    题意:每个人都有一个独特的排名(数字大小)与独特的位置(从前往后一条线上),求满足排名在两者之间并且位置也在两者之间的三元组的个数 思路:单去枚举哪些数字在两者之间只能用O(n^3)时间太高,但是可以 ...