关于Vue页面跳转传参，参数不同，但页面只获取参数一次的问题

ztj100 2025-06-29 22:03 3 浏览 0 评论

1.问题描述

问题描述： element 展示表格（页面A），点击表格的每一行的查看详情按钮，可以携带此行的信息参数跳转到另一个页面（页面B），但是从A页面到B页面，只有第一次跳转的时候B页面可以获取到A页面的参数，返回再次A->B ，B页面无法获取到参数。

2.解决办法：

方法一：在接受参数的页面（B页面）添加路由监听

A页面传参：
  pushToRouter(val) {
    this.$router.push({
      path: '/pageRouter/pushPage',
      query: { val: val}
    })
  }
B页面接收参数：
  mounted() {
    this.getParams();
  },
  // 如果不用watch进行监听，则会出现参数只获取一次的情况
  watch: {
    '$route'(){
     this.getParams();
    }
  },
  methods: {
    // 接收参数的方法
  	getParams() {
	  this.param = this.$route.query.val;
	}
  }

方法二：在接受参数的页面（B页面）使用beforeRouteUpdate方法

A页面传参：
  pushToRouter(val) {
    this.$router.push({
      path: '/pageRouter/pushPage',
      query: { val: val}
    })
  }
B页面接收参数：
export default {
// 添加beforeRouteUpdate，注意此方法的位置
  beforeRouteUpdate(to, from, next) {
    next()
    this.getParam();
  },
  name: "pageToRouter",
  data() {
    return {
      param: null
    }
  },
  mounted() {
    this.getParam();
  },
  methods: {
    getParam() {
      this.param = this.$route.query.val;
    }
  }
}

3.结束（贴上代码图片）

A页面传参：

B页面接受参数（方法一）：

B页面接收参数（方法二）：

vue跳转页面携带参数

上一篇：Vue3非兼容变更——函数式组件（vue 兼容）
下一篇：微信外H5跳转小程序——组件(vue项目)

关于Vue页面跳转传参，参数不同，但页面只获取参数一次的问题

1.问题描述

2.解决办法：

3.结束（贴上代码图片）

相关推荐

取消回复欢迎你发表评论:

Vue-实现自定义插件弹窗（vue 实现弹窗）

Vue自定义Hook示例:useUrlState（vue中的自定义指令如何使用）

MySQL中这14个小玩意，让人眼前一亮!

旗舰机新标杆 OPPO Find X2系列正式发布售价5499元起

什么是幂等?分布式锁如何实现业务幂等?

手把手教你搞定菜单权限设计，精确到按钮级别，建议收藏

详解MySQL 字符串拼接之concat\concat_ws\group_concat

如何快速切换node版本?利用n包快速切换nodejs版本

如何发个 npm 包?

【Python机器学习系列】建立多层感知机模型预测心脏疾病

关于Vue页面跳转传参，参数不同， 但页面只获取参数一次的问题

1.问题描述

2.解决办法：

3.结束（贴上代码图片）

相关推荐

取消回复欢迎 你 发表评论:

Vue-实现自定义插件弹窗（vue 实现弹窗）

Vue自定义Hook示例:useUrlState（vue中的自定义指令如何使用）

MySQL中这14个小玩意，让人眼前一亮!

旗舰机新标杆 OPPO Find X2系列正式发布 售价5499元起

什么是幂等?分布式锁如何实现业务幂等?

手把手教你搞定菜单权限设计，精确到按钮级别，建议收藏

详解MySQL 字符串拼接之concat\concat_ws\group_concat

如何快速切换node版本?利用n包快速切换nodejs版本

如何发个 npm 包?

【Python机器学习系列】建立多层感知机模型预测心脏疾病

关于Vue页面跳转传参，参数不同，但页面只获取参数一次的问题

取消回复欢迎你发表评论:

旗舰机新标杆 OPPO Find X2系列正式发布售价5499元起