How to use router guard in nuxtjs-CodePudding

I am have been trying to get this to work, but it doesn't seem to work. I am trying to use the beforeRouteUpdate in my component in nuxt. What I want is for an api request to be made when I try to leave that page to another page. Here is my code;

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

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

In the code above, I am trying to log a message to the console when the route is updated, and nothing seems to happen. I tried making a request to the server when the route changes, that doesn't also work. Tried using this other way;

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

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

It still doesn't work. The current path is http://localhost:3000/cart. I am trying to console.log a message when the path changes to http://localhost:3000/ or something else. I don't know if I am doing something wrong.

I am using console.log in this case for simplicity

CodePudding user response：

Instead of beforeRouteUpdate use beforeRouteLeave:

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

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