alenabdula
286
1
Vue

Vue Router, execute method on main instance

Posted 2 years ago by alenabdula

Take following example of main VueJS instance:

const dashboard = new Vue({
    router,
    el: '#dashboard',
    data: {
        nav: {
            active: false,
        }
    },
    methods: {
        toggleNav() {
            this.nav.active = !this.nav.active;
        }
    }
});

Somewhere in my HTML, I have a hamburger like navigation with anchor that toggles navigation visibility.

<a href="#" class="nav-toggle" @click.prevent="toggleNav()"></a>

All works great and as expected.

Now, I would like toggleNav() to execute when clicking on a router-link element. Which loads another component.

<router-link :to="{ name: 'dashboard' }">Dashboard</router-link>

Currently, when I click on a router-link, component loads fine but navigation stays active.

Any help is appreciated.

Best, Alen.

Please sign in or create an account to participate in this conversation.