vue页面跳转传参的方法及其遇到的问题

最新推荐文章于 2024-04-20 23:30:58 发布

LanseMOgang

最新推荐文章于 2024-04-20 23:30:58 发布

阅读量372

点赞数

分类专栏： VUE ElementUI JavaScript 文章标签： javascript vue.js elementui Powered by 金山文档

本文链接：https://blog.csdn.net/LanseMOgang/article/details/129044032

版权

JavaScript 同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

VUE

6 篇文章 0 订阅

订阅专栏

ElementUI

5 篇文章 0 订阅

订阅专栏

在项目练手中遇到,点击右侧按钮跳转到它的子页面,并且需要传递参数给他的子页面,我是这样做的

1.设置子页面的路由

{
    path: 'userInfo/userSetting/:Parm',
    component: () => import('../views/user/userSetting'),
    name: 'userSetting',
    meta: { title: '用户设置' }
  }

2.主页面跳转方法

 handleSetting(row) {
    let tone = {
      id: row.id,
      name: row.name
    }
    let params = JSON.stringify(tone)
    this.$router.push({name:'userSetting', params: { toneParm:params }})
  },

所传的参数如果是对象一定要用JSON.stringify()先转为json格式,否则子页面在刷新时,参数会消失

3.子页面接收参数

watch: {
  $route(to) {
    //进入用户铃音设置刷新页面,防止页面不跳转
    if (to.name == "toneSetting") {
      let dataStr = JSON.parse(this.$route.params.toneParm);
      this.id = dataStr.id;
      this.name = dataStr.name;
    }
  },
},
created() {
  let dataStr = JSON.parse(this.$route.params.toneParm);
  this.id = dataStr.id;
  this.name = dataStr.name;
},

这时候就能使用传递过来的参数了