如何在nuxtjs中使用路由器守卫

Question

我一直在努力使它起作用，但它似乎不起作用。我正在尝试在 nuxt 的组件中使用 beforeRouteUpdate。我想要的是在我尝试将该页面离开到另一个页面时发出 api 请求。这是我的代码；

<template>
  <div>
      //code here
  </div>
</template>

<script>
export default {
  beforeRouteUpdate(to, from, next) {
    console.log('Before update')
  },
}
</script>

在上面的代码中，我试图在更新路由时向控制台记录一条消息，但似乎什么也没发生。我尝试在路由更改时向服务器发出请求，但这也不起作用。尝试使用其他方式；

<template>
  <div>
      //code here
  </div>
</template>

<script>
export default {
  watch: {
    $route(to, from) {
      console.log('Route path')
    },
  },
}
</script>

还是不行。当前路径是http://localhost:3000/cart。当路径更改为 http://localhost:3000/ 或其他内容时，我正在尝试 console.log 一条消息。不知道是不是我做错了

为了简单起见，我在这种情况下使用 console.log

Answer 1

而不是 beforeRouteUpdate 使用 beforeRouteLeave:

<template>
  <div>
      //code here
  </div>
</template>

<script>
export default {
  beforeRouteLeave(to, from, next) {
    console.log('Route Leave')
  },
}
</script>

如何在nuxtjs中使用路由器守卫

How to use router guard in nuxtjs

vue.js

vue-router

nuxt.js