vue中params和query的区别，以及具体用法

query传递参数会在url后面用？连接起来，且参数之间用&&符号连接然后显示在页面的url中；params传递参数不会显示在页面中；query有点像ajax中的get请求，而params像post请求。
在vue中使用query要搭配path路径，而params只能由命名路由name来引入；看下列代码：

路由中path的配置
```
  {path: '/argu/:name/:id', //这种路由配置是params传递参数,且这个后面必须加参数，如果不加，刷新页面这些参数会消失name:'argu',component: () => import('@/views/argu.vue'),},
```
使用params传递参数注意要在path路径后面添加参数，不然刷新页面数据会丢失。

看图：这是没有刷新之前；

如果path:'/argu'没有后面的参数，刷新页面数据就会丢失

这是刷新之后：可以看到数据消失了，变为了默认数据。

使用params传参的具体写法：
```
this.$router.push({//params要name一起用，不然接收不到参数name: `argu`,params:{name:'xrw',id:'123'}   });
```
使用query传递参数，在路由中设置path: ‘/argu’，后面可以不跟参数。
```
this.$router.push({ path:'/argu', //如果在路由中配置了name属性在这里也是可以用的 name:'argu' 效果同上query:{ name:'xrw'id : '123'}
})
```

可以看到使用query传递的参数会显示在url中用？连接起来，可以在浏览器中看到保密性不怎么好。

两者接收参数的形式：

query：

//query接收参数
{{ this.$route.query.name }}
{{ this.$route.query.id }}

params:

//params接受参数
{{ this.$route.params.name }}
{{ this.$route.params.id }}

组件中也可以用props来进行接受参数，这种方式（推荐方法）

这样需要在路由配置中设置props为true:

  {path: '/argu', name:'argu',component: () => import('@/views/argu.vue'),//设置props为ture，代表将path后面的参数作为值，传递到组件中，组件中通过props属性接受这个值props:true,},

然后再组件中设置props来接收这个参数：

<template><div>//props形式传递参数{{ name }}{{ id }}//$route形式传递参数{{ this.$route.params.name }} {{ this.$route.params.id }}{{ this.$route.query.name }}{{ this.$route.query.id }} </div>
</template><script>
export default {props:{name:{type:String,default:'lily' //默认情况},id:{type:Number,default:'0' //默认情况}}
}
</script>

这里我们需要来了解一下 $ route和$router的区别：

//$router : 是路由操作对象，只写对象
//$route : 路由信息对象，只读对象//操作 路由跳转
this.$router.push({name:`argu`,params:{name:'xrw',age:'123'}
})//读取 路由参数接收
this.name = this.$route.params.name;
this.age = this.$route.params.age;

总结

query和params是两种传参方式
使用params传参只能由name引入路由，如果写成path页面会显示undefined报错。
使用query传参的话可以使用path也可以使用name引入路由，不过建议使用path引入路由。
params是路由的一部分，一定要加路由后面添加参数，不添加刷新页面数据会丢失；而query是拼接在url后面的参数，路由后面不添加也没关系。

vue中params和query的区别，以及具体用法相关推荐

vue中params与query区别
关于vue-router 中参数传递的那些坑(params,query) vue-router传递参数分为两大类: 编程式的导航 router.push 声明式的导航 **query和params的区 ...
【原】vue-router中params和query的区别
1.引入方式不同 query要用path来引入 this.$router.push({path: 'test',query: {type: 2,detail: '哈哈'} }) params要用nam ...
vue方法调用失败后多次调用_浅析Vue中 computed / watch / methods的区别
思考:请说下Vue中computed 和 watch 的区别( 面试题 ) 构造选项 computed / watch / methods computed ● computed 起初构想在Vue的 ...
params和query的区别
params和query的区别引入方式不同: query要使用path来引入,params要使用name来引入,接受参数格式类似,引用分别是this.route.query.name和this.ro ...
vue router 的路由传参 params 和 query 的区别
1. 不带参数<router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}&qu ...
Vue路由params、query参数丢失解决
在vue中路由传参有两种形式:1.params:2.query 解决办法:sessionStorage或者localStorage 两者的区别:localStorage是永久保存不清除一直存在,ses ...
Vue 中 computed vs methods的区别
computed:计算属性 methods:方法 watch:侦听器 computed与methodes区别 1.computed是响应式的,methods并非响应式. 2.调用方式不一样,compu ...
vue中runtimecompiler和runtimeonly的区别
简单总结如果在之后的开发中,你依然使用template,就需要选择runtimecompiler 如果你之后的开发中,使用的是.vue文件夹开发,那么可以选择runtimeonly runtimec ...
vue中的target与currentTarget区别
<template><transition name="slide"><div class="top_box" @click=&q ...

vue中params和query的区别，以及具体用法

总结

vue中params和query的区别，以及具体用法相关推荐

最新文章

热门文章