当前位置:   article > 正文

[Uniapp]携带参数跳转界面(两种方法)_uniapp 跳转子页面携带参数

uniapp 跳转子页面携带参数

一、方法1:路由携参

   假设现在有两个界面:界面A和界面B。并要由界面A跳转到界面B,则我们可以使用
                                                                uni.navigateTo({})

  跳转界面时,将参数附加在URL后,并在B界面的onLoad()获取到这个参数

界面A的代码

  1. <script>
  2. export default {
  3. data() {
  4. return {
  5. paramPageA: [], //在A界面中定义的变量,一会要传送给界面B
  6. }
  7. },
  8. methods: {
  9. onGo() {
  10. uni.request({
  11. url: "接口地址",
  12. method: "GET",
  13. success(res) {
  14. this.paramPageA = res.data.data;
  15. const paramJson = JSON.stringify(this.paramPageA);
  16. //主要看下面这段代码
  17. uni.navigateTo({
  18. url: '/pages/PageB/PageB?
  19. activityList='+encodeURIComponent(paramJson)
  20. })
  21. //先把A界面要传送的参数转化成JSON形式
  22. //然后以encodeURIComponent的形式拼接到URL后方传送
  23. //主要看上面这段代码
  24. }
  25. });
  26. }
  27. }
  28. }
  29. </script>

        界面B的代码

  1. onLoad() {
  2. // 从URL参数中获取paramPageA,并解析为JSON对象
  3. const paramPageB = decodeURIComponent(this.$route.query.paramJson);
  4. this.paramPageBJSon = JSON.parse(paramPageB);
  5. //界面B中定义的参数
  6. console.log("接收到的参数", this.paramPageJson);
  7. },

二、方法2:依靠全局变量传参

首先在main.js文件中这样定义全局变量

  1. Vue.prototype.$globalData = { //在此定义所有全局变量
  2. allUrl:"http://localhost:8888", //统一URL地址
  3. myToken:null, //校验token值
  4. paramPage:"", //要传的参数
  5. }

在界面A中这样修改全局变量

this.$globalData.paramPage = res.data.data;

之后在界面B中直接引用即可

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/221426
推荐阅读
相关标签
  

闽ICP备14008679号