vue-router query和params传参(接收参数)$router $route的区别
Vue 区别 参数 Query 接收 Router 传参 Route
2023-09-27 14:26:44 时间
今天做项目时踩到了vue-router传参的坑(query和params),所以决定总结一下二者的区别。
直接总结干货!!!
1.query方式传参和接收参数
传参:
this.$router.push({
path:'/xxx'
query:{
id:id
}
})
接收参数:
this.$route.query.id
注意:传参是this.$router,接收参数是this.$route,这里千万要看清了!!!
this.$router 和this.$route有何区别?
在控制台打印两者可以很明显的看出两者的一些区别:
- 1.$router为VueRouter实例,想要导航到不同URL,则使用$router.push方法
- 2.$route为当前router跳转对象,里面可以获取name、path、query、params等
2.params方式传参和接收参数
传参:
this.$router.push({
name:'xxx'
params:{
id:id
}
})
接收参数:
this.$route.params.id
注意:params传参,push里面只能是 name:'xxxx',不能是path:'/xxx',因为params只能用name来引入路由,如果这里写成了path,接收参数页面会是undefined!!!
另外,二者还有点区别,直白的来说query相当于get请求,页面跳转的时候,可以在地址栏看到请求参数,而params相当于post请求,参数不会再地址栏中显示
vue的自学之路还得继续走,坑还会继续踩,下一个坑会是神马...
原文地址:https://segmentfault.com/a/1190000012735168相关文章
- vue.js:props的驼峰标识
- vue.js:组件中的data为什么必须是一个函数
- 【经典面试题】delete和Vue.delete的区别
- Vue.js 3.0发布更新计划
- Vue学习笔记之vue.js 两个等号 == 和三个等号===的区别 数字0和空字符串
- vue $mount 和 el的区别
- vue中extend/component/mixins/extends的区别
- vue query 和 params 传参的区别
- vue+element ui项目总结点(一)select、Cascader级联选择器、encodeURI、decodeURI转码解码、mockjs用法、路由懒加载三种方式
- Vue笔记——webpack使用(狂神)
- vue中data和data()的区别
- Vue核心⑪(内置指令)
- 动态组件 :is与is区别 vue.js
- 【vue2】vue生命周期的理解
- vue系列:vue-cli2、vue-cli3搭建vue项目
- Vue.use与Vue.prototype的区别及说明
- vue中的 v-if与jquery中的hide()有什么区别 vue如何在控制台修改数据
- Vue.js实现多条件筛选、搜索、排序及分页的表格功能