vue.extend后的组件 ，当页面销毁的时候。组件怎么销毁

Question

main是一个提示的组件，挂载到 vue上，再页面里引用。现在的问题是页面销毁后，组件却没销毁。请问各位大佬这样的咋处理下

<template>
  <el-dialog
    title="提示"
    :visible.sync="dialogVisible"
    width="35%"
    :close-on-click-modal="false"
  >
    <div class="dialog-box">
      <el-scrollbar wrap-class="scrollbar-wrapper">
        <div class="tip-text" v-html="messageText" />
      </el-scrollbar>
    </div>

  </el-dialog>
</template>

methods: {
    openDialog() {
      this.dialogVisible = true
    }
  }

import Vue from 'vue'
import Main from './main.vue'

const ShowMessageConstructor = Vue.extend(Main)

const ShowMessage = function(option) {
  const instance = new ShowMessageConstructor()
  instance.message = option
  instance.openDialog()
  instance.$mount()
  document.body.appendChild(instance.$el)
}

Vue.prototype.$showMessage = ShowMessage
export default ShowMessage

Answer 1

参考elementUI的message-box组件，增加一个hashchange组合close的处理应该可以

https://github.com/ElemeFE/el...

Answer 2

this.$destroy(true);
this.$el.parentNode.removeChild(this.$el);