Vue.js：如何制作动态菜单？

Question

有人可以帮助我从数据库动态创建菜单吗？可以说我已经提供了数据库中的所有数据，但是如果用户登录了，我想显示一个动态菜单。

我创建了一些Vue组件

App.vue

<template>
    <div id="app">
        <navbar></navbar>
        <div class="page-container">
            <leftmenu></leftmenu>
            <container></container>
        </div>
    </div>
</template>

<script>

import Menu from './components/Menu.vue'
import LeftMenu from './components/Leftmenu.vue'
import Container from './components/Container.vue'


export default {
    components: {
        'navbar': Menu,
        'leftmenu': LeftMenu,
        'container': Container,
    }
}

</script>

LeftMenu component负责制作将使用数据库数据的菜单：

Leftmenu.vue

<template>
    <div class="page-sidebar-wrapper">
        <div class="page-sidebar navbar-collapse collapse">
            <ul class="page-sidebar-menu  page-header-fixed " data-keep-expanded="false" data-auto-scroll="true"
                data-slide-speed="200" style="padding-top: 20px">
                <li class="sidebar-toggler-wrapper hide">
                    <div class="sidebar-toggler">
                        <span></span>
                    </div>
                </li>
                <li class="nav-item start active open">
                    <a href="javascript:;" class="nav-link nav-toggle">
                        <i class="icon-home"></i>
                        <span class="title">Dashboard</span>
                        <span class="selected"></span>
                        <span class="arrow open"></span>
                    </a>
                    <ul class="sub-menu">
                        <router-link
                                to="/home"
                                tag="li">
                            <a class="nav-link">
                                <i class="icon-layers"></i>
                                <span class="title">Home</span>
                                <span class="badge badge-danger">5</span>
                            </a>
                        </router-link>
                        <router-link
                                to="/grafik"
                                tag="li">
                            <a class="nav-link">
                                <i class="icon-layers"></i>
                                <span class="title">Grafik</span>
                                <span class="badge badge-danger">5</span>
                            </a>
                        </router-link>
                        <router-link
                                to="/form"
                                tag="li">
                            <a class="nav-link">
                                <i class="icon-layers"></i>
                                <span class="title">Form</span>
                                <span class="badge badge-danger">5</span>
                            </a>
                        </router-link>
                        <router-link
                                to="/uploadfile"
                                tag="li">
                            <a class="nav-link">
                                <i class="icon-layers"></i>
                                <span class="title">Upload File</span>
                                <span class="badge badge-danger">5</span>
                            </a>
                        </router-link>
                        <router-link
                                to="/login"
                                tag="li">
                            <a class="nav-link">
                                <i class="icon-layers"></i>
                                <span class="title">Login</span>
                                <span class="badge badge-danger">5</span>
                            </a>
                        </router-link>

                    </ul>
                </li>



                <li class="nav-item  ">
                    <a href="javascript:;" class="nav-link nav-toggle">
                        <i class="icon-settings"></i>
                        <span class="title">System</span>
                        <span class="arrow"></span>
                    </a>
                    <ul class="sub-menu">
                        <li class="nav-item  ">
                            <a href="ui_metronic_grid.html" class="nav-link ">
                                <span class="title">Login</span>
                            </a>
                        </li>
                        <li class="nav-item  ">
                            <a href="ui_metronic_grid.html" class="nav-link ">
                                <span class="title">Ganti Password</span>
                            </a>
                        </li>
                        <li class="nav-item  ">
                            <a href="ui_metronic_grid.html" class="nav-link ">
                                <span class="title">Ganti Profil</span>
                            </a>
                        </li>
                        <li class="nav-item  ">
                            <a href="ui_metronic_grid.html" class="nav-link ">
                                <span class="title">Logout</span>
                            </a>
                        </li>
                    </ul>
                </li>


            </ul>
        </div>
    </div>
</template>

<script>
    import _ from 'lodash'

    export default {
        created() {
            if(_.isEmpty(this.$auth.getAuthenticatedUser())) {
                alert('empty')
            } else {
                alert('user authenticated')
            }
        }
    }
</script>

this.$auth.getAuthenticatedUser()已经完成，但如果我的localStorage为空，将返回一个空对象。如果我已登录，它将填满。

我正在使用这段代码：

this.$http.get('api/getmenu')
     .then(response => {
     this.data = response.body
})

在哪个组件我应该查询数据库以获取数据以呈现登录用户的菜单？

如果我放置一个函数来查询App.vue组件中的数据库，那么应用程序将显示错误。

我应该在 Leftmenu组件中添加什么？