前言最近在学习node，想搭建一个前后端兼备的项目，然后认识了query和parmas两个兄弟。你觉得他们长得不像，其实用法太像了。这不，我专门写了一篇文章来区分这两兄弟，我们从vue路由和Node接收的角度来说说vue路由中的参数传递。假设我们现在需要实现一个路由开关。单击以切换到W组件并传递一个id值和一个age值。我们使用router-link来写，出现了一系列的疑惑routes:{???}对于查询和parmas，A使用名称还是路径？怎么写路由？网址是什么样的？会不会有什么隐藏的坑query:name和path可以根据之前路由的名字设置{path:'/hhhhhhh',//这里可以是任意名称:'W',//这里必须是W组件:W}然后在url中加上路径匹配http://localhost:8080/#/hhhhhhh?id=1234&age=12后者是基于路径设置路由{path:'/W',//这里必须是Wname:'hhhhhhhh',//这里任意组件:W}url:http://localhost:8080/#/W?id=1234&age=12这里两种方式都可以自定义路径的样式，只不过一种是定义在router-linkto中，另一种是定义在routes中。接收参数时，使用this.$route.query.idparmas:这里只能用name不能用path，否则params中的内容会被忽略，然后加上{path:'/W/:id/:age',name:'W',component:W}这里的名字和上面router-link中的名字一致，url要看这个路径的写法http://localhost:8080/#/W/1234/12注意，路径中的/w可以任意写，也可以写/hhhhh，但是!/:id和/:age不能省略，如果不能改名字，第一次点击可以实现组件跳转和通过this.$route.parmas.id获取传递的id值，但是如果刷新页面，传递的id值和age值会丢失，从这里也可以看出params比query更严格req.query而Node中的req.params是在后端，需要接受前端的axios请求，所以又遇到了这两个兄弟，什么样的axios请求对应什么样的接受方式呢，这里不只有req.query、req.params，还有一个req.body混入其中。伙计们，一团糟。假设现在前端使用axios向后端发送请求，发送id值请求后端数据req.queryaxios.get(`/api/?id=1234`)oraxios.get(`/api`,{params:{id:'1234'})在前端，路由器在发送查询时接收查询。使用this.$route.query接收查询。使用this.$route.params接收它。但是这里，虽然第二种方法中有参数，但是我们必须使用req.query.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在前端路由和后端的区别-结束接待令人困惑。还有很多东西要写。希望本文能帮助大家区分它们的使用场景。
