Vue-router: In-Component Guard beforeRouteLeave not working

[Armesh]

Vue.js / vue-router versions

2.1.8 / 2.1.1

Happens in Vue SPA app made with webpack vue cli template. Tested with fresh project.

See the details here: https://forum.vuejs.org/t/in-component-guard-beforerouteleave-not-working/4658/1

[posva]

Please make sure to read the Issue Reporting Guidelines before opening new issues. Questions should be posted on the forum or StackOverflow. Thanks.

---

beforeRouteLeave is meant to be used on a view component not on the root component

[Armesh]

@posva I also tried using the beforeRouteLeave hook in multiple child view components and it still doesn't do anything. E.g below

<template>
  <canvas v-bind:id="'chart-hardsets-program-' + programId" width="400" height="150"></canvas>
</template>

<script>
import Chart from 'chart.js'

export default {
  props: {
    programId: {
      required: true,
      type: Number
    }
  },
  data: function () {...},

  methods: {...},

  beforeRouteLeave (to, from, next) {
    console.log('left child component')
  },
  mounted: function () {...} // mounted
}
</script>

[Armesh]

Solved here: https://forum.vuejs.org/t/in-component-guard-beforerouteleave-not-working/4658

[smarbos]

Hello! I'm still having this issue. And I see another people having this same problem.
I'm trying to use beforeRouteLeave in a page component using the Vue router.
The beforeRouteLeave never triggers, but beforeRouteEnter does.
I'm using vuejs 2.3.2, node v8.9.4.
If anybody needs help to reproduce, let me know!
Thanks!

[hsnotebook]

@smarbos Maybe you are using beforeRouteLeave in a sub component.
Check this issue

[geni94]

The component using beforeRouteLeave or beforeRouteUpdate needs to be declared as a path in vue-router, otherwise it won't be recognized as one and view route updates won't be triggered.

[suryadana]

Not stop when condition press button F5.

[lgarczyn]

I've had this issue, the doc did not mention I needed to add:

Component.registerHooks([
    'beforeRouteEnter'
    'beforeRouteUpdate',
    'beforeRouteLeave'
]);

before my typescript class-component declaration.

As stated, it only works for root components, declared in the router declaration