vue页面之间相互传值的实现方式
更新时间：2026年03月26日 09:08:48 作者：impossible1994727
这篇文章主要介绍了vue页面之间相互传值的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
1、使用query传值--地址栏可见
比如从a.vue跳转至b.vue，传name=‘jack’
代码如下：
this.$router.push({
path: "/result",
query: { name: 'jack' }
});在b.vue通过地址栏的url 进行接收参数；
我是在created这个函数里面进行接收的，var name = this.$route.query.name;就可以接收到name这个参数了；
2、使用params传值--地址栏不可见
这个方式要注意一点，在请求的时候需要写上在router下面index.js里面的name，
可以和query一同传值；
this.$router.push({
path: "/result",
name: "Result",
query: { name: 'name' },
params: { usersitelist: 'userlist' }
});params传值在地址栏不可见，但是取值方式是和query一样的，我也是在created函数里面进行取值的；
var usersitelist = this.$route.params.usersitelist;
这样就可以取到了。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue中实现一个项目里兼容移动端和pc端问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要介绍了用vue3写了一个Json-Preview的相关知识,引入后直接<json-preview v-model="jsonData"></json-preview>就可以使用了，本文通过示例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
这篇文章主要介绍了Vue.extend 编程式插入组件的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
这篇文章主要介绍了vue中计算属性和方法的区别及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了计算属性和侦听器，文章以介绍计算属性、侦听器的相关资料展开详细内容,需要的朋友可以参考一下，希望对你有所帮助2021-11-11
element-ui table行点击获取行索引（index）并利用索引更换行顺序
这篇文章主要介绍了element-ui table行点击获取行索引（index）并利用索引更换行顺序，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
在Vue应用程序中,路由组件是构建单页应用的关键部分,传递参数给路由组件可以让我们动态地展示内容,处理用户输入,以及实现各种交互功能,本文就给大家介绍了六种Vue路由组件传递参数场景,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了vue+SSM实现验证码功能,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-12-12
这篇文章主要介绍了vue结合axios实现restful风格的四种请求方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
在项目中会发现一个奇怪的现象，当我们在使用element-plus中的图标组件时会出现内存泄漏，所以本文讲给大家讲讲如何解决vue3中的内存泄漏的问题,需要的朋友可以参考下2023-07-07
最新评论