很多人都知道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. 配置过滤器filter对跨站脚本攻击XSS实现拦截

    1.web.xml中配置filter [html] view plain copy   <filter> <filter-name></filter-name> & ...

  2. fkwの题目(祝松松生日快乐!)

    麓山国际实验学校 傅少,匡哥和巨夫出的题目(共3道) 一.题目概况 题目名称 打地铺 泡妹子 开房间 题目类型 传统 传统 传统 可执行文件名 deeeep soccer room 输入文件名 dee ...

  3. 求阶乘,输入一个正整数 n,输出n!

    #include<stdio.h>int factorial (int n); int main(){ int n; scanf("%d",&n); print ...

  4. GPS基础知识

    GPS基础知识 冷启动 冷启动是指模块内部没有任何参的星历或历书的情况下,模块的首次启动,一般而言,由于模块内部没有星历参数,这个时候接收卫星信号开始,就要在天线接收的范围内不停的寻找并下载星历,它的 ...

  5. Linux下自动清除MySQL日志文件

    MySQL运行过程中会生成大量的日志文件,占用不少空间,修改my.cnf文件配置bin-log过期时间,在Linux下自动清除MySQL日志文件 [mysqld] expire-logs-days= ...

  6. 培训笔记——ubuntu安装

    1.选择安装位置,如果是做双系统提前准备一个分区,如果覆盖安装就无所谓了2.下载iso镜像文件,制作启动盘,Windows或linux环境下分别有相应的软件可以制作启动光盘或U盘3.开始安装一 设置开 ...

  7. X-real-ip与X-Forwarded-For

    经过反向代理后,客户端与web服务器之间添加了中间层,因此: 1.代理服务器使用$remote_addr拿到的会是客户端的ip 2. web服务器使用$remote_addr拿到的会是代理服务器的ip ...

  8. C# Stopwatch与TimeSpan详解

    http://www.cnblogs.com/newstart/archive/2012/09/21/2696884.html

  9. R Customizing graphics

    Customizing graphics GraphicsLaTeXLattice (Treillis) plots In this chapter (it tends to be overly co ...

  10. 程序以html形式发送邮件注意问题

    1.样式要写在内部,不要单独定义样式 2.div 使用背景图片在有些浏览器中出不来这时候需要用: <table style="width: 640px" cellpaddin ...