om/public/routes/navRoutes.js

Vue.component('nav-router', {
    template: `
                <div>
                    <nav class="navbar is-fixed-bottom is-expanded is-primary is-hidden-desktop" role="navigation" aria-label="main navigation">
                        <div class="navbar-brand is-expanded is-light">
				            <router-link to="/home" class="navbar-item is-primary is-expanded has-text-centered is-hidden-desktop">
                                <i class="material-icons">home</i>
				            </router-link>

                            <router-link to="/files" class="navbar-item is-primary is-expanded">
                                <i class="material-icons">search</i>
                            </router-link>

                            <router-link v-if="auth.roles.author" to="/createMessage" class="navbar-item is-primary is-expanded is-hidden-desktop">
                                <i class="material-icons">add_circle</i>
                            </router-link>

                            <router-link to="/bookmark" class="navbar-item is-primary is-expanded is-hidden-desktop">
                                <i class="material-icons">bookmark</i>
                            </router-link>

                            <router-link to="/profil" class="navbar-item is-primary is-expanded is-hidden-desktop">
                                <i class="material-icons">person</i>
                            </router-link>
                        </div>
                    </nav>

                    <div class="is-fullheight">
                        <div class="column is-sidebar-menu is-hidden-touch">
                            <aside class="menu is-medium">
                                <ul class="menu-list">
                                    <li><router-link to="/home">
                                        <i class="material-icons">home</i> Home
                                    </router-link></li>

                                    <li><router-link to="/files">
                                        <i class="material-icons">search</i> Search
                                    </router-link></li>

                                    <li><router-link v-if="auth.roles.author" to="/createMessage">
                                        <i class="material-icons">add_circle</i> Create Message
                                    </router-link></li>

                                    <li><router-link to="/bookmark">
                                        <i class="material-icons">bookmark</i> Bookmark
                                    </router-link></li>

                                    <li><router-link to="/profil">
                                        <i class="material-icons">person</i> Profil
                                    </router-link></li>
                                </ul>
                            </aside>
                        </div>
                    </div>
                </div>`,
    data: function() {
        return {
            auth: auth,
        };
    },
});

const routes = [
            { path: "/",                component: HomeRouter },
            { path: "/home",            component: HomeRouter },
			{ path: "/files",           component: FileRouter },
			{ path: "/createMessage",   component: CreateMsgRouter },
            { path: "/bookmark",        component: BookmarkRouter },
			{ path: "/profil",          component: ProfilRouter },
];

const router = new VueRouter({
    routes,
    linkActiveClass: 'is-active'
});

/*
<div class="nav-right nav-menu is-hidden-desktop-only">
    <router-link to="/home" class="nav-item is-primary is-expanded has-text-centered is-hidden-desktop-only">
        <i class="material-icons">home</i> Home
    </router-link>

    <router-link to="/files" class="nav-item is-primary is-expanded has-text-centered is-hidden-desktop-only">
        <i class="material-icons">language</i> Language
    </router-link>

    <router-link to="/createMessage" class="navbar-item is-primary is-expanded has-text-centered is-hidden-desktop-only">
        <i class="material-icons">add_circle</i> Create Message
    </router-link>

    <router-link to="/bookmark" class="navbar-item is-primary is-expanded has-text-centered is-hidden-desktop-only">
        <i class="material-icons">bookmark</i> Bookmark
    </router-link>

    <router-link to="/profil" class="navbar-item is-primary is-expanded has-text-centered is-hidden-desktop-only">
        <i class="material-icons">person</i> Profil
    </router-link>
</div>
*/