Prevent route change within Vue compnent

Question

Is it possible to prevent a route change within a Vue Component (not within my router file)?

My situation uses the same component, but the URL changes (/users/1 -> /users/2)

Vue.extend({
  data: () => ({
     active: true
  }),
  beforeRouteLeave(to, from, next){
     if (this.active) {
        // do not redirect
     } else {
        next();
     }
  }
})

My understanding is that this doesn't work when navigating the URL but the View/Component stays the same.

Answer 1

If I'm using beforeRouteUpdate route url path in the browser not getting update, so I used beforeRouteLeave which is updating url and stop reloading same page.

beforeRouteLeave(to, from, next) {
    if (this.active) {
      next(false);
    } else {
      next();
    }
}

Answer 2

I need to use beforeRouteUpdate instead of beforeRouteLeave as stated in the docs

beforeRouteUpdate(to, from, next) {
    if (this.active) {
      next(false);
    } else {
      next();
    }
},