前端 - vue2项目，A页面点击提交后，跳转到B页面，但是跳转后要打开一个message对话框组件，该怎么做？

Question

这个message的打开事件应该写在A页面里还是B页面里，这个message组件应该写在A页面里还是B页面里？

Answer 1

可以通过以下步骤实现：

1. 在A页面的提交逻辑处理中，例如在axios请求成功的回调函数中，使用Vue Router的router.push()方法跳转到B页面，并传递一个query参数，例如router.push({ path: '/B', query: { showMessage: true } })。
2. 在B页面的mounted生命周期中，使用this.$route.query获取传递的query参数，判断是否需要显示message对话框组件。例如：

mounted() {
  if (this.$route.query.showMessage) {
    this.$nextTick(() => {
      // 显示message对话框组件的逻辑
    })
  }
}

3. 在B页面中，可以使用Vue的<transition>组件和CSS动画实现message对话框的渐变效果。例如：

<template>
  <div v-if="showMessage" class="message-dialog">
    <!-- 省略内容 -->
  </div>
</template>

<style>
.message-dialog {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.message-dialog-enter-active {
  opacity: 1;
}
</style>

<script>
export default {
  data() {
    return {
      showMessage: false
    }
  },
  mounted() {
    if (this.$route.query.showMessage) {
      this.showMessage = true
    }
  }
}
</script>

以上是一个chatgpt实现思路。当然，具体实现要根据自己的需求进行调整。

Answer 2

跳转到B页面，肯定在B页面里面操作最好，怎么方便怎么来