vue element Message 每次只出现一次，同时点击 message 跳转到其他页面上

本文介绍了如何在Vue应用中创建自定义消息提示组件，包括`resetMessage`函数的实现，以及如何在`main.js`中注册并使用。通过`Message`组件管理不同类型的提示，并在页面点击事件中关闭消息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一步：新建文件夹 XXXXXXXXX.js

import { Message } from "element-ui";
let messageInstance = null;
var resetMessage = (options) => {
  if (messageInstance) {
    messageInstance.close();
  }
  messageInstance = Message(options);
};
resetMessage.close = function () {
 if (messageInstance) {
    messageInstance.close();
    messageInstance = null;
  }
};
["error", "success", "info", "warning"].forEach((type) => {
  resetMessage[type] = (options) => {
    if (typeof options === "string") {
      options = {
        message: options,
        type: type,
      };
    }
    options.type = type;
    return resetMessage(options);
  };
});

export const message = resetMessage;

第二步：在main.js 注册到vue实例中

import { message } from "你的js 文件路径";
Vue.prototype.$message = message;

第三不：在页面上使用

// 调用 message
     this.$message({
        dangerouslyUseHTMLString: true,
        duration: 0,
        customClass: "myAddCard",
        message:'<a style="color: #32AA9F;cursor: pointer;">XXXXXXXX</a>',
      });
      const myAddCard = document.getElementsByClassName("myAddCard");
      for (var i = 0; i < myAddCard.length; i++) {
        myAddCard[i].addEventListener("click", () => {
          this.$message.close();
          this.$router.push("你的路由地址");
        });
       }

// 关闭 message
 this.$message.close();