深入了解query和params的使用区别

<router-link :to="{ A: 'xxx', query: { xx:'xxx' }}" />
<router-link :to="{ A: 'xxx', parmas: { xx:'xxx' }}" />
routes:{ "htmlcode">

<router-link :to="{ name: 'W', query: { id:'1234'，age:'12' }}"/>
<router-link :to="{ path: '/W', query: { id:'1234',age:'12' }}"/>


name和path都可以用


前者的routes基于name设置




{
path: '/hhhhhhh', //这里可以任意
name: 'W', //这里必须是W
component: W
}


然后就把path匹配添加到url上去




http://localhost:8080/#/hhhhhhh"htmlcode">

{
path: '/W', //这里必须是W
name: 'hhhhhhhh', //这里任意
component: W
}


url:http://localhost:8080/#/W"htmlcode">

<router-link :to="{ name: 'W', params: { id:'1234',age:'12' }}"/>


这里只能用name不能用path，不然会直接无视掉params中的内容

然后在routes中添加




{
path:'/W/:id/:age',
name:'W',
component:W
}


这里的name与上面router-link中的name保持一致


url就取决于这个path的写法http://localhost:8080/#/W/1234/12


注意，path里面的/w可以任意写，写成/hhhhh也可以


但是！


/:id和/:age不能省略，且不能改名字


不写的话，第一次点击可以实现组件跳转


且可以通过this.$route.parmas.id获取到传过来的id值，但如果


刷新页面，传过来的id值和age值就会丢失


从这也能看出params比query严格
Node中的req.query和req.params


在后端中，要接受前端的axios请求


于是我们又碰到了这哥俩


什么样的axios请求对应什么样的接受方式？


还有不止是req.query,req.params,又混进来一个req.body


好家伙，乱成一锅粥


假设前端现在用axios向后端发送一个请求，发送id值请求后端的数据
req.query




axios.get(`/api/"htmlcode">

axios.get(`/api`，{ params:{id:'1234' })


在前端里面，router怎么发送的就怎么收


query发送的就用this.$route.query接收


params发送的就用this.$route.params接收


但是在这里，虽然第二种方式里面有params


但这两种我们都要用req.query.id来获取里面的id值




router.get('/api',function(req,res){
console.log(req.query.id)
.......
})


req.params


那如果直接把id值写进发送的url里面呢




axios.get(`/api/1234`)


看这个形式有没有觉得很眼熟

它跟上面params的url非常像, 我们就反向操作一下




router.get('/api/:id',function(req,res){
console.log(req.params.id)
.......
})


如果它是这么请求的




axios.get(`/api/1234-12`)


中间用-或者&隔开

那我们也可以在获取时的路径上这么写




router.get('/api/:id-:age',function(req,res){
console.log(req.params.id)
console.log(req.params.age)
.......
})


req.body


上面两个都是处理get请求的


而这位小兄弟就是用来处理post请求的

(需要安装body-parser中间件）




axios.post(`/api`,{ id:'1234' })


我们就用req.body来接收




router.get('/api',function(req,res){
console.log(req.body.id)
.......
})


总结


我们归纳了query和params在前端路由以及后端接收中的区别


容易混淆的东西还是得多写，多总结


希望这篇文章对大家分清它们的使用场景有所帮助
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

            
            上一篇：JS数组扁平化(flat)方法总结详解

            下一篇：如何使用JavaScript实现栈与队列