很多人都知道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. centOS6.2 最小安装下的无线网络配置

    一.安装wireless_tools,http://www.linuxfromscratch.org/blfs/view/svn/basicnet/wireless_tools.html 二.vi / ...

  2. C#通过代码彻底结束桌面进程explorer,解决自动重启问题

    C# 通过代码 Process.Kill 方法杀死桌面进程后,会自动重启 其实可以通过 Taskkill 指令结束桌面进程, 在命令行查看 taskkill 帮助, TASKKILL [/S syst ...

  3. Jmeter+Ant+Jenkins接口自动化测试框架搭建

    前言 软件开发的V模型大家都不陌生,其中测试阶段分为单元测试→功能测试→系统测试→验收测试.其中单元测试一般由开发同学们自己完成,大部分测试具体实施(这里不包括用例设计)是从单体功能测试开始着手的. ...

  4. 《Hive编程指南》问题

    1.Hive不支持记录级别的更新.插入或删除? 2.sort by 和 order by 的区别? https://blog.csdn.net/jthink_/article/details/3890 ...

  5. 九度OJ 1347:孤岛连通工程 (最小生成树)

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:1522 解决:314 题目描述: 现在有孤岛n个,孤岛从1开始标序一直到n,有道路m条(道路是双向的,如果有多条道路连通岛屿i,j则选择最短 ...

  6. php在不同平台下路径分隔符不同的解决办法

    在看phpamf时看到一个常量“DIRECTORY_SEPARATOR”,最后发现是一个全局的常量,用来定义路径分隔符的 主要解决在windows和linux下路径分隔符不同的造成代码不通用的问题,在 ...

  7. 2017-2018-1 20179209《Linux内核原理与分析》第十周作业

    设备与模块 设备分类 块设备 块设备可以以块为单位寻址,块大小随设备不同而不同:设备通常支持重定位操作,也就是对数据的随机访问.块设备的例子有外存,光盘等. 字符设备 字符设备不可寻址,仅供数据的流式 ...

  8. linux系统环境下搭建coreseek(+mmseg3) (good)

    1.下载并解压coreseek软件,操作命令如下: wget http://www.coreseek.cn/uploads/csft/3.2/coreseek-3.2.14.tar.gz 说明:文件下 ...

  9. MyBatis:学习笔记(4)——动态SQL

    MyBatis:学习笔记(4)——动态SQL

  10. Linux中查找文件和文件内容的常用命令

    一.whereis <程序名称> 查找软件的安装路径-b 只查找二进制文件 -m 只查找帮助文件-s 只查找源代码-u 排除指定类型文件-f 只显示文件名-B <目录> 在指定 ...