Nuxt.js: Show modal on route change

[shyamchandranmec]

Hi
I need to show a modal on route change. if a file upload is already in progress.
After the upload the user moves to another page.
So if the user clicks on some other button while the upload is happening I need to show this modal.
Is there a hook in pages which I can implement to handle this.

Basically I am looking for a hook which is called when the user leave a particular route.

_{This question is available on Nuxt.js community (#c294)}

[alexchopin]

Hi,
You need to use beforeRouteLeave() from vue-router.

beforeRouteLeave (to, from, next) {
    // called when the route that renders this component is about to
    // be navigated away from.
    // has access to `this` component instance.
  }

Vue Router Documentation

[shyamchandranmec]

@alexchopin This works only in pages and not in the components within those pages. So I had to share many variables using the store to get this done. Is it possible to add this functionality to the components as well.

[shyamchandranmec]

@alexchopin
This hook is not available inside components. Its available only inside pages. I have a use case where I need to do something in the component (like reseting its state) when the route changes.
Any workaround for this?

[alexchopin]

watch: {
  '$route': function( ...

[shyamchandranmec]

@alexchopin Thanks

[pirmax]

Have you got an example for this?

[alexey-v-paramonov]

  watch: {
    '$route.path': function() {
      ...
    }
  },

[nicroto]

How do you prevent the navigation within a watch? Edit: doesn't even catch the navigation within a component (as is the case of the issue we are all discussing).

[northamerican]

the above methods used to detect url changes made with history.pushState but since nuxt 2.0, no longer do so. i just use window.onpopstate = fn to detect changes to url made with the history API.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.