美文网首页
React(脚手架)——create-react-app撸api

React(脚手架)——create-react-app撸api

作者: 感觉不错哦 | 来源:发表于2019-03-11 17:11 被阅读0次
传值其实本质还是只有一个,就是获取query!获取query的方式不一样,最常见的就是获取url参数数据,当然也有通过缓存比如说localstorage或者cookie

动态路由


新建一个组件,并且已经配置好了 路由



现在我们编辑之前一个写过的路由,并且让他跳转


注意我在这个组件中使用了Link,那么我们就要在上方引入这个Link,这步很重要

此时点击按钮自然而然的就跳转到了content组件页面,OK此时我们想获取点击的同时获取aid
有vue或者是node基础的小伙伴应该晓得了动态路由怎么配,就是:xxx


在/content后方加上:参数即可,当然这是路由的配置,传参的配置还没好,既然是变量,那我们在传参的时候to里面应该就是{}表达式

此时再点击链接的时候,url上就出现了对应的aid



那当然这样写不推荐,推荐ES6的模板字符串



OK~~~

如何获取参数呢,我们可以在Content的生命周期函数中打印一下



当然这个参数不是传参决定的是路由配置的时候决定的



如果这里改变了一下那么key就变成bid了

get传值

get传值用的也比较广泛完全看自己个人喜好,get传值其实就是获取url中的数据,就像平时URL的location.search

把配置搞回原样,然后在Link中添加参数

那么这时候数据就会在URL中显示出来



此时处理的方法就有很多了,你可以直接使用原生JS的window.location.search方法处理,也可以使用react

此时控制台就会打印 ?aid=2
如何处理这个,方法很多,比如写个原生的写法

如果说参数多的话,这种方法就会很麻烦。那熟悉node的小伙伴肯定知道url是可以解析这种域名的


通过es5的方法引入url,然后使用url.parse


成功获取到参数,而且继续加参数也无所畏惧,当然你用react也是一样的


如果你不想让别人知道你传了啥,开启你的猥琐模式的话,可以使用下面这个方法
如果你发现你显示不出来,重启一下命令吧!!编程式导航的话这个就比较简单了,自己找找吧

相关文章

网友评论

      本文标题:React(脚手架)——create-react-app撸api

      本文链接:https://www.haomeiwen.com/subject/plfbpqtx.html