params 和 query 传参的区别

很多人都知道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规则。

原文地址:https://www.cnblogs.com/alvin553819/p/9798629.html

时间: 2024-10-07 23:43:05

params 和 query 传参的区别的相关文章

vue params、query传参使用

声明式:<router-link :to="...">编程式:router.push(...) 这两种方式 都可以实现跳转链接,在上篇文章继续,通过A组件跳转链接到B组件并且传参数. 1.router.push使用 router/index.js export default new Router({ routes: [ { path: '/', name: 'A', component: require('../components/A') }, { path: '/B/

vue router 如何使用params query传参,以及有什么区别

写在前面: 传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,喜欢的可以点波赞,或者关注一下,希望可以帮到大家. 本文首发于我的个人blog:obkoro1.com Vue router如何传参 params.query是什么? params:/router1/:id ,/router1/123,/router1/789 ,这里的id叫做params query:/route

Mybatis中#{}和${}传参的区别及#和$的区别小结

最近在用mybatis,之前用过ibatis,总体来说差不多,不过还是遇到了不少问题,再次记录下, 比如说用#{},和 ${}传参的区别, 使用#传入参数是,sql语句解析是会加上"",比如 select * from table where name = #{name} ,传入的name为小李,那么最后打印出来的就是 select * from table where name = '小李',就是会当成字符串来解析,这样相比于$的好处是比较明显对的吧,#{}传参能防止sql注入,如果

vue路由传参query和params路由传参的区别?

相同点:router文件index.js 都是利用name属性. params传递时: params接收时利用this.$route.param进行接受: query路由传参: query接受利用this.$route.query 而展示上params路由传参像Ajax中post传参方式: query路由传参像get传参 原文地址:https://www.cnblogs.com/manban/p/12012567.html

mybatis中#{}和${}传参的区别

使用#传入参数是,sql语句解析是会加上'',比如 select * from table where name = #{name} , 传入的name为小李,那么最后打印出来的就是 select * from table where name = '小李', 就是会当成字符串来解析,这样相比于$的好处是比较明显对的吧, #{}传参能防止sql注入,如果在mapper文件中中,你用 select * from table where name = ${name} 那么解析出来的sql就是 sel

引用传参与指针传参的区别

Reference: https://blog.csdn.net/u013130743/article/details/80806179 概念: 引用传参:引用是变量的别名.引用传参传递进形参列表的是实参的别名,在函数的执行中也会在栈空间上开辟存储空间,存储形参的地址 (也就是实参的地址).对形参的任何操作都会间接寻址到实参.也就是在函数中对形参变量做的任何改变都会影响到实参变量. 指针传参:指针传参本质上是值传参.指针在形参列表中传递的是实参的地址.也就是说,指针的值的实参的地址.在函数的执行

路由传参 query 和 params

vue路由传参分为两种情况: 一.query和params传参的区别: 1.query传参显示参数,params传参不显示参数,params相对于query来说较安全一点. 2.取值方法也有不同:query取值:this.$route.query.XXX || this.$route.params.xxx 3.query传值页面刷新数据还在,而params传值页面数据消失. 二.各自写法: query 组件写法(help.vue): 方式一: 方式二: 接受写法(home.vue) 页面渲染(h

vue-router路由传参之query和params

首先简单来说明一下$router和$route的区别 //$router : 是路由操作对象,只写对象 //$route : 路由信息对象,只读对象 //操作 路由跳转 this.$router.push({ name:'hello', params:{ name:'word', age:'11' } }) //读取 路由参数接收 this.name = this.$route.params.name; this.age = this.$route.params.age; 1·query传递参数

Vue 页面传参方式 Query 和 Params

1. query 与 params 传参 query ????需要和配合 path 属性使用,携带参数会拼接在请求路径后,效果同 Get 请求方式 http://localhost:8033/Permission/Role/Form?productCode=crm-operate&roleId=1&roleName=admin&roleType=-1&roleDesc=%E7%AE%A1%E7%90%86%E5%91%98 params ????需要配合 name 属性使用