如何在Vue路由器中打开模态

【问题标题】：How to open modal in vue router如何在Vue路由器中打开模态
【发布时间】：2021-02-28 11:03:44
【问题描述】：

有人知道如何在 vue-router 中使用此代码 this.$modal.showForm('Login)' 显示我的模态窗口吗？当我在 Vue 组件中执行此操作时没问题，但是当我尝试在 vue-router 中打开它时出现错误Cannot read property '$modal' of undefined。

【问题讨论】：

标签： vue.js vue-router

【解决方案1】：

模态必须存在于组件中。要在路由更改时显示它，您可以使用组件的 mounted 钩子。

<script>
  export default {
    name: 'the-component',
    mounted () {
      this.$modal.showForm('Login)'
    }
  }
</script>

顺便说一句，你可以监听布局中的路由变化，并在需要时触发对话框：

<script>
  export default {
    name: 'the-layout',

    beforeRouteUpdate () {
      if(this.$route.name === 'xyz'){
        this.$modal.showForm('Login)'
      }
    }
  }
</script>

【讨论】：