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

前言

路由传参的时候,有俩兄弟,一个叫query,一个叫parmas

你说他们俩长得也不像吧,可这用法实在是太类似了

下面就让我们分别从vue路由和Node接收两个角度讲他们的区别

vue路由中的传参

假设我们现在需要实现一个路由切换,点击之切换到W组件

并传递一个id值和一个age值

我们运用router-link来写

然后一连串的疑惑就产生了

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

对于query和parmas来说

  1. A用name还是path?
  2. routes要怎么写?
  3. url长什么样?
  4. 会有什么隐藏的坑么

query:

<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?id=1234&age=12

后者基于path来设置routes

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

url:http://localhost:8080/#/W?id=1234&age=12

这两种方法,都可以自定义path的样式,
不过一个是在router-link to里面定义,一个则是在routes里面定义
在接收参数的时候都是使用this.$route.query.id

parmas:

<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/?id=1234`)

或者

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在前端路由以及后端接收中的区别

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

希望这篇文章对大家分清它们的使用场景有所帮助

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 浅析vue-router jquery和params传参(接收参数)$router $route的区别

    今天做项目时踩到了vue-router传参的坑(jquery和params),所以决定总结一下二者的区别. 1.jquery方式传参和接收参数 传参: this.$router.push({ path:'/xxx' query:{ id:id } }) 接收参数: this.$route.query.id 注意:传参是this.$router,接收参数是this.$route,这里千万要看清了!!! this.$router 和this.$route有何区别? 在控制台打印两者可以很明显的看出两

  • vue params、query传参使用详解

    最近在学习Vue,本文介绍了vue params.query传参使用,分享给大家,也给自己留个笔记 声明式:<router-link :to="..."> 编程式:router.push(...) 这两种方式 都可以实现跳转链接,在上篇文章继续,通过A组件跳转链接到B组件并且传参数. 1.router.push使用 router/index.js export default new Router({ routes: [ { path: '/', name: 'A', co

  • vue router使用query和params传参的使用和区别

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

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

    前言 路由传参的时候,有俩兄弟,一个叫query,一个叫parmas 你说他们俩长得也不像吧,可这用法实在是太类似了 下面就让我们分别从vue路由和Node接收两个角度讲他们的区别 vue路由中的传参 假设我们现在需要实现一个路由切换,点击之切换到W组件 并传递一个id值和一个age值 我们运用router-link来写 然后一连串的疑惑就产生了 <router-link :to="{ A: 'xxx', query: { xx:'xxx' }}" /> <route

  • 详解Vue路由传参的两种方式query和params

    Vue路由传参的两种方式query和params 一.router-link 1. 不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name // 注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始. 2.带参数 <router-link :to=&

  • Vue 路由间跳转和新开窗口的方式(query、params)

    路由间跳转配置: query 方式 参数会在url中显示 this.$router.push({ // query方式 path: "/a", query: { projectDetails: val }, params 方式 传参数据不会在导航栏中显示,需要配合路由的name属性使用 // params 方式 name: 'a', params: { projectDetails: val } 新开页面 需要使用resolve配置 const {href} = this.$route

  • vue如何通过params和query传值(刷新不丢失)

    目录 vue通过路由传值 一. 通过query传递参数刷新不丢失参数 二. 通过params传递参数刷新不丢失参数 三. 同时使用params和query传递参数刷新不丢失参数 总的来说 vue通过路由传值 在许多跳转的同时需要完成携带参数,并且在刷新的同时不丢失参数. $router:是路由操作对象,只写对象 $route:路由信息对象,只读对象 一. 通过query传递参数刷新不丢失参数 在需要传值的页面: this.$router.push({ path: '/tasks',//通过pat

  • 解决vue-router中的query动态传参问题

    最近在写项目,在写项目的过程会总发现这样或者那样的问题,比如说vue-router中的query如何传递动态的参数,经过了一些波折才解决了问题,问题描述如下: 希望跳转的时候url是这样的:http://localhost:8080/editmovie?id=**** <li><router-link :to="{path:'editmovie', query: {id : 111}}" class="edit">修改</router-

  • vue.js this.$router.push获取不到params参数问题

    主要通过两种方式传参 1.query方式传参和接受参数 this.$router.push({ path:'/xxx' query:{ idname:id } }) 接收的方式:this.$route.query.id 2.params方式传递参数 this.$router.push({ name:'路径名称' query:{ idname:id } }) 接收的方式:this.$route.params.id 代码 this.$router.push({ path: '/container',

  • vue 中的动态传参和query传参操作

    Vue router 如何传参 params.query 是什么? params:/router1/:id,这里的 id 叫做 params.例如/router1/123, /router1/789 query:/router1?id=123,这里的 id 叫做 query.例如/router1?id=456 query 方式传参和接收参数 传参: this.$router.push({ path:'/xxx' query:{ id:id } }) this.$router.push 传参时,

  • vue跳转页面常用的4种方法与区别小结

    目录 1:router-link跳转 2:this.$router.push() 3. this.$router.replace() 4. this.$router.go(n) ps:区别 总结 vue跳转页面有好几种不同方法,下面将通过实例代码给大家介绍,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下. 1:router-link跳转 1.不带参数 <router-link :to="{name:'home'}"> <router-link :to=

随机推荐