How to navigate to home view from within a panel

I’ve got the left-panel with:

<template>
  <f7-page>
    <f7-navbar title="Menu"></f7-navbar>

    <f7-list>
      <f7-list-item @click.prevent="logout" title="Log off" view="#main-view" panel-close></f7-list-item>
    </f7-list>
  </f7-page>
</template>
<script>
export default {

    methods: {
        logout: function () {
            console.log('do logout');

            this.$auth.destroyToken();
            // this.$f7router.navigate('/', '#main-view');
        }
    }
}
</script>

Now when I click on “Log out” it loads the home page into the menu panel itself. I want to navigate to ‘/’ in the main view. How can this be done from the method called from the menu item?

export default {

    methods: {
        logout: function () {
            console.log('do logout');

            this.$auth.destroyToken();
            this.$f7.views.main.router.navigate('/');
        }
    }
}
1 Like