vue中params与query区别

关于vue-router 中参数传递的那些坑（params，query)

vue-router传递参数分为两大类：

编程式的导航 router.push
声明式的导航

**query和params的区别，query相当于get请求，在页面跳转的时候，可以在地址栏看到请求参数，然而params则相当于post请求，参数不会在地址栏中显示，但是刷新页面之后参数会消失，可以使用localStorage进行存储。**代码如下：

if(this.$route.params.userId){this.value = this.$route.params.userId;localStorage.setItem('content',this.$route.params.userId)
}else{this.value = localStorage.getItem('content')console.log(this.value)
}

很多人都说query传参要用path来引入，params传参要用name来引入，确实是这样，不过只针对router-link方法，具体看代码

<router-link :to="{path:'/about/shopList',query:{userId:123}}">吃火锅
</router-link>
<router-link :to="{name:'shopList',params:{userId:456}}">吃羊蝎子
</router-link>他们同样都跳转到shopList页面，通过this.$route.params.userId和this.$route.query.userId都获取到了参数
如果将代码换成如下：<router-link :to="{path:'/about/shopList',params:{userId:123}}">吃火锅
</router-link>
<router-link :to="{name:'shopList',query:{userId:456}}">吃羊蝎子
</router-link>
同样跳到shopList页面，却拿不到参数userId。。。

router.push并不是如此，直接上代码

1.this.$router.push({name: 'shopList',params:{userId: 666}
})
2.this.$router.push({name: 'shopList',query:{userId: 666}
})
不仅name和params传递的参数有效，而且name和query传递的参数也是有效的。3.this.$router.push({path:'/about/shopList',query:{userId: 666}
})path和query传递参数，在shopList页面可以===接收到参数===
4.this.$router.push({path:'/about/shopList',params:{userId: 666}
})path和params传递参数，在shopList页面====接收不到参数====

以上代码亲测有效，大佬们不喜勿喷。

vue中params与query区别相关推荐

vue中params和query的区别，以及具体用法
query传递参数会在url后面用?连接起来,且参数之间用&&符号连接然后显示在页面的url中:params传递参数不会显示在页面中:query有点像ajax中的get请求,而para ...
Vue路由params、query参数丢失解决
在vue中路由传参有两种形式:1.params:2.query 解决办法:sessionStorage或者localStorage 两者的区别:localStorage是永久保存不清除一直存在,ses ...
Vue 中data 和 data() 区别
Vue 中data 和 data() {return {};}区别一般简单Vue实例(常见教程视频中) new Vue({el: "#id",data: {message: &q ...
vue中v-model和v-bind区别
Vue中的数据绑定有三种方式插值:也就是{{name}}的形式,以文本的形式和实例data中对应的属性进行绑定 v-bind v-model v-model 主要是用在表单元素中,它实现了双向绑定. ...
js中for(const i in/of arr/obj)和vue中v-for指令的区别
在js中 var obj = {q:'qqq',w:'www',e:'eee'}var arr1 = [{r:'rrr'},{t:'ttt'},{y:'yyy'}]var arr2 = ['uuu', ...
【原】vue-router中params和query的区别
1.引入方式不同 query要用path来引入 this.$router.push({path: 'test',query: {type: 2,detail: '哈哈'} }) params要用nam ...
Vue 中computed 与 methods 区别
1.示例 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF- ...
Vue中methods与computed区别
核心区别 computed是属性访问,method是函数调用 computed带有缓存功能,method没有实例: <script>Vue.createApp({data() {retu ...
Vue中 watch 和 computed 区别和使用场景
在 vue 的项目中,经常用到 watch 和 computed 这两个属性.两个都是数值改变触发改变的属性,他们之间有什么区别? 1.区别 Computed: computed: 是计算属性,依赖其 ...

vue中params与query区别

关于vue-router 中参数传递的那些坑（params，query)

很多人都说query传参要用path来引入，params传参要用name来引入，确实是这样，不过只针对router-link方法，具体看代码

router.push并不是如此，直接上代码

以上代码亲测有效，大佬们不喜勿喷。

vue中params与query区别相关推荐

最新文章

热门文章