很多人都知道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. SharePoint解决方案及开发系列(1)-BPM

    自从2008年做SharePoint第一个项目至今,不知不觉已经快7个年头了:上次听涂曙光老师的讲座,有机会能跟他面对面地沟通(“我是看您的blog长大的”).刚换了新工作,暂时比较闲,乘着这段时间对 ...

  2. Earth Hour(最短路)

    Earth Hour Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 125536/65536 K (Java/Others)Total ...

  3. 像使用linux一样使用mac

    1 不能像使用windows一样使用mac 因为mac卸载不方便. 2 gcc的问题 就使用系统默认的gcc,即clang,要想使用原声的gcc是不行的,mac本身不支持.

  4. maven编译问题-maven项目运行时找不到文件,解决方案之一

    问题描述:以上信息是tomcat在启动项目的时候报的错误信息,发现没有找到配置文件,实际上配置文件在项目中是存在的,但是,在编译过程中,配置文件没有能加载到编译后的项目中.就造成了,找不到这些怕配置文 ...

  5. GeekforGeeks Trie - 键树简单介绍 - 构造 插入 和 搜索

    版权声明:本文作者靖心,靖空间地址:http://blog.csdn.net/kenden23/,未经本作者同意不得转载. https://blog.csdn.net/kenden23/article ...

  6. hadoop 根据secondary namenode恢复namenode

    refer to http://www.cnblogs.com/Richardzhu/p/3435989.html http://blog.csdn.net/wuzhilon88/article/de ...

  7. 每天一个Linux命令(24)tar命令

        tar命令可以为linux的文件和目录创建档案.     (1)用法: 用法:  tar  [选项]   [文件参数]     (2)功能:     功能:  用来压缩和解压文件.tar本身不 ...

  8. 【转】.net中快捷键的使用

    当前行行首:Home 当前行行尾:End 当前文档首行:ctrl+Home 当前文档尾行:ctrl+End 选中当前行: ① 按Home(定位到行首)然后按Shift+Dnd(行尾)   {从行首连选 ...

  9. Java多线程系列 JUC线程池04 线程池原理解析(三)

    转载 http://www.cnblogs.com/skywang12345/p/3509954.html  https://blog.csdn.net/qq_22929803/article/det ...

  10. js琐碎知识点

    1.javascript发展史 javascript首先由Netscape设计,为改善浏览器用户体验,名为liveScript, 网景公司被sun公司收购,为了宣传改名为javascript 后来su ...