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

#头条创作挑战赛#

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页面接收参数（方法二）：