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;

这样就可以取到了。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

关于echarts 清空上一次加载的数据问题
这篇文章主要介绍了关于echarts 清空上一次加载的数据问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
详解vue模拟加载更多功能（数据追加）
本篇文章主要介绍了vue模拟加载更多功能（数据追加），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-06-06
vue 通过base64实现图片下载功能
这篇文章主要介绍了vue 通过base64实现图片下载功能，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下
2020-12-12
vue3如何使用element-plus的dialog
这篇文章主要介绍了vue3优雅的使用element-plus的dialog,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-04-04
关于element ui 表格中的常见特殊属性说明
这篇文章主要介绍了关于element ui 表格中的常见特殊属性说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
浅析Vue中method与computed的区别
在new Vue的配置参数中的computed和methods都可以处理大量的逻辑代码，但是什么时候用哪个属性，要好好区分一下才能做到正确的运用vue。这篇文章主要介绍了Vue中method与computed的区别,需要的朋友可以参考下
2018-03-03
Vue中使用Echarts响应式布局flexible.js+rem适配方案详解
这篇文章主要介绍了Vue中使用Echarts响应式布局flexible.js+rem适配方案详解,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-01-01
Vue实现天气预报功能
这篇文章主要为大家详细介绍了Vue实现天气预报功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-08-08
vue3 vite配置跨域及不生效问题解决
这篇文章主要介绍了vue3 vite配置跨域以及不生效问题,本文给大家分享完美解决方案，需要的朋友可以参考下
2023-07-07
解决vue项目中页面调用数据在数据加载完毕之前出现undefined问题
今天小编就为大家分享一篇解决vue项目中页面调用数据在数据加载完毕之前出现undefined问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11