vue中query和params传参的区别

简介: vue中query和params传参的区别

别的不多说,直接上代码:

1.query方式传参和接收参数

注意:传参是this.$router,接收参数是this.$route,这里千万要看清了!!!

this.$router 和this.$route有何区别?

在控制台打印两者可以很明显的看出两者的一些区别:

  • 1.$router为VueRouter实例,想要导航到不同URL,则使用$router.push方法
  • 2.$route为当前router跳转对象,里面可以获取name、path、query、params等

2.params方式传参和接收参数

注意:params传参,push里面只能是 name:'xxxx',不能是path:'/xxx',因为params只能用name来引入路由,如果这里写成了path,接收参数页面会是undefined!!!

另外,二者还有点区别,直白的来说query相当于get请求,页面跳转的时候,可以在地址栏看到请求参数,而params相当于post请求,参数不会再地址栏中显示!

 

相关文章
|
2天前
|
JavaScript
在 Vue 3 组件通信方式中,Provide / Inject 与 Vuex 的区别是什么?
在 Vue 3 组件通信方式中,Provide / Inject 与 Vuex 的区别是什么?
|
2天前
|
JavaScript 前端开发 API
Vue2与Vue3插槽使用的区别及案例
Vue 3在插槽功能上的改进,体现了其对开发体验的持续优化。通过简化API、加强动态特性和提升性能,Vue 3使得插槽的使用更加灵活和高效。这些改进不仅有助于减轻开发者的负担,还为组件之间的高级交互和内容复用打开了新的可能性。随着Vue生态系统的不断成熟,我们有理由相信,Vue将继续为前端开发提供强大且易用的工具。
11 3
|
1天前
|
JavaScript 网络架构
|
4天前
|
前端开发 JavaScript 开发者
React 和 Vue.js 框架的区别是什么?
React 和 Vue.js 框架的区别是什么?
|
4天前
|
JSON JavaScript 数据格式
Vue路由params、query参数丢失解决
该文章介绍了在Vue中使用`params`和`query`进行路由参数传递时,如何通过`sessionStorage`或`localStorage`解决参数丢失的问题。
13 2
|
14天前
|
JavaScript 索引
Vue 2和Vue 3的区别以及实现原理
Vue 2 的响应式系统通过Object.defineProperty来实现,它为对象的每个属性添加 getter 和 setter,以便追踪依赖并响应数据变化。
25 9
|
1月前
|
JavaScript
Vue学习之--------路由的query、params参数、路由命名(3)(2022/9/5)
这篇文章详细介绍了Vue路由中的query参数、命名路由、params参数以及props配置的使用方式,并通过实际项目案例展示了它们在开发中的应用和测试结果,同时解释了`<router-link>`的`replace`属性如何影响浏览器历史记录。
Vue学习之--------路由的query、params参数、路由命名(3)(2022/9/5)
|
1月前
|
存储 JavaScript
在vue中_this和this的区别
这篇文章解释了在Vue框架中使用普通函数和箭头函数定义组件方法时`this`指向的区别,指出普通函数中的`this`指向Vue实例,而箭头函数中的`this`则指向其父级作用域,通常是`window`。
|
1月前
|
JavaScript 前端开发
Vue学习之--------绑定样式、条件渲染、v-show和v-if的区别(2022/7/12)
这篇博客文章讲解了Vue中绑定样式和条件渲染的方法,包括类样式绑定的不同写法、`v-show`和`v-if`的条件渲染区别以及它们的使用场景和特点,并通过代码实例和测试效果来展示具体应用。
Vue学习之--------绑定样式、条件渲染、v-show和v-if的区别(2022/7/12)
|
25天前
|
JavaScript 前端开发 编译器
对Vue2 与 Vue3 的区别的理解
【9月更文挑战第3天】对Vue2 与 Vue3 的区别的理解
23 0