[Vuejs]-Run method before route

by

0👍

I would define a method that calls toggleModal first, then navigates. Like so:

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

You don’t need the event argument unless you intend on capturing more data from the event or event target. You could also wrap the router push in a setTimeout if you so desire, for perhaps cleaner looking view changes.

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

Of course, there are hooks that you can use from vue-router that make this easy. Example (assuming you’re using single file components and 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()
  }
}

Link to vue router hooks: https://router.vuejs.org/en/advanced/navigation-guards.html

Leave a comment