如何在 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

用beforeRouteLeave代替beforeRouteUpdate：

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

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