vue.js - 为什么 beforeRouteLeave 从未被调用？

Question

我对 beforeLeaveRoute 应该如何在 VueRouter 中工作感到困惑。触发器永远不会被调用。这是我的代码:

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>

代码无提示地失败，没有错误。这些链接有效，单击时页面从第一页导航到第二页并返回，但我没有从 beforeLeaveRoute 触发器中获得任何控制台日志，并且无法通过调用 next 来控制路由的离开。

使用:vue 2.6.10 和 vue-router 3.1.3

Answer 1

我认为你在编写代码时弄错了

<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>

你不能写beforeLeaveRoute，而是必须写beforeRouteLeave 这有意义吗？