vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法

针对“vue跳转同一个组件,参数不同,页面接收值只接收一次”的问题，我们可以采用以下两种解决方案：

方案一：使用watch监听$route变化

这种方式需要在组件的created或mounted生命周期中，监听vue-router的$route对象。如下所示：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  watch: {
    $route(to, from) {
      console.log(to.params);
      // 在这里更新数据
      this.message = to.params.message;
    }
  },
  created() {
    // 初始化数据
    this.message = this.$route.params.message;
  }
}
</script>

在上面的代码中，我们定义了一个watch监听$route对象，并在其中更新组件中的数据。

方案二：使用key属性强制更新组件

我们也可以在路由跳转时强制更新组件，这样就能够接收到传入的新参数。具体实现步骤如下：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  created() {
    // 初始化数据
    this.message = this.$route.params.message;
  },
  methods: {
    handleClick() {
      // 跳转时强制更新组件
      this.$router.replace({
        path: '/home',
        params: {
          message: 'Hello World'
        },
        // 在这里设置新的key
        key: +new Date()
      })
    }
  }
}
</script>

在上面的代码中，我们在跳转路由时通过key属性强制更新组件，从而使得组件能够接收到新的参数。需要注意的是，每次路由跳转都需要设置新的key。