Vue.js Router: Run Code When Component Is Ready

I'm working on a single-page app with Vue.js and its official router. I have a menu and a component (.vue file) per every section which I load using the router. In every component

Solution 1:

As you are using Vue.js Router, it means that each time you will transition to a new route, Vue.js will need to update the DOM. And by default, Vue.js performs DOM updates asynchronously.

In order to wait until Vue.js has finished updating the DOM, you can use Vue.nextTick(callback). The callback will be called after the DOM has been updated.

In your case, you can try:

route: {
    activate() {
        this.$nextTick(function () {
            // => 'DOM loaded and ready'
        })
    }
}

For further information:

• https://vuejs.org/api/#Vue-nextTick
• https://vuejs.org/guide/reactivity.html#Async-Update-Queue

Solution 2:

You can use

mounted(){
  // jquery code
}

Solution 3:

Though this may be a bit late... If I guess correctly, the component having problem stays on the page when you navigate between routes. This way, Vue reuses the component, changing what's inside it that needs to change, rather than destroy and recreate it. Vue provides a key attribute to Properly trigger lifecycle hooks of a component. By changing a component's key, we can indicate Vue to rerender it. See key in guide for details and key in api for code sample.