Question

我有一个登录模式，我通过设置.is-active来激活它。为此，我有一个这样的方法：

methods: {
    toggleModal: function (event) {
      this.isActive = !this.isActive
    }
  }

我运行onclick。根据{{1}}的布尔值，我的模态得到类isActive。

事情是，在我的模态中，我有一个按钮，用户可以使用以下代码将新视图呈现给新视图：

.is-active

如您所见，它已路由到<router-link class="control" @click="toggleModal()" to="/register">。在执行此操作之前，我需要运行/register以便模式关闭。现在它的路由没有运行方法，这意味着新视图的模态覆盖是......不是最佳的。

在Vue有什么好办法吗？我可以创建一个方法，首先调用toggleModal()，然后从方法路由？

感谢。

Answer 1

我将首先定义一个调用toggleModal的方法，然后导航。像这样：

methods: {
  navigateAway () {
    this.isActive = !this.isActive
    this.$router.push('/register')
  }
}

除非您打算从事件或事件目标中捕获更多数据，否则您不需要event参数。如果你愿意的话，你也可以将路由器推送到setTimeout中，以便查看更清晰的视图。

methods: {
  navigateAway () {
    let vm = this
    vm.isActive = !vm.isActive
    setTimeout(function () {
      vm.$router.push('/register')
    }, 50)
  }
}

当然，您可以使用vue-router中的钩子来轻松实现这一点。示例（假设您使用单个文件组件和Vue.js 2.x）：

export default {
  data () {
    return {
      isActive: false
    }
  },
  beforeRouteLeave (to, from, next) {
    this.isActive = false // I assume that you would not want to leave it open upon navigating away
    next()
  }
}

链接到vue路由器挂钩：https://router.vuejs.org/en/advanced/navigation-guards.html

在路线

1 个答案: