CODEWITHSUNDEEP
vue.jsvue-router
mmachenry
mmachenry

Reputation: 1962

Why is beforeRouteLeave never called?

I'm confused about how beforeLeaveRoute is supposed to work in VueRouter. The trigger is never being called. Here's my code:

src/App.vue

<template>
      <router-view/>
</template>
<script>
export default {
 name: 'App',
};
</script>

src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import PageOne from '../views/PageOne'
import PageTwo from '../views/PageTwo'

Vue.use(VueRouter)

export default new VueRouter({
  routes: [
    {
      path: '/pageone',
      name: 'pageone',
      component: PageOne,
    },
    {
      path: '/pagetwo',
      name: 'pagetwo',
      component: PageTwo,
    },
  ]
})

src/views/PageOne.vue

<template>
    <router-link to="/turbines">Go to page two</router-link>
</template>

<script>
export default {
    name: 'PageOne',
    beforeRouteLeave (to, from, next) {
        console.log("beforeLeaveRoute PageOne");
    },
}
</script>

src/views/PageTwo.vue

<template>
  <router-link to="/towers">Go to page one</router-link>
</template>

<script>
export default {
    name: 'PageTwo',
    beforeRouteLeave (to, from, next) {
        console.log("beforeLeaveRoute PageTwo");
    }
}
</script>

The code fails silently with no errors. The links work, the page navigates from page one to page two and back when clicked, but I get no console logs from the beforeLeaveRoute trigger and cannot control the leaving of the route by calling next.

Using: vue 2.6.10 and vue-router 3.1.3

Upvotes: 2

Views: 5245

Answers (1)

Clarance Liberiste Ntwari
Clarance Liberiste Ntwari

Reputation: 4067

I think you are mistaken while writing the codes

<template>
  <router-link to="/towers">Go to page one</router-link>
</template>

<script>
export default {
    name: 'PageTwo',
    beforeRouteLeave(to, from, next) {  //check here
        console.log("beforeLeaveRoute PageTwo");
    }
}
</script>

you could not have written beforeLeaveRoute instead you had to write beforeRouteLeave does that make sense?

Upvotes: 2

Related Questions