Vue.js : How to make dynamic menu?

问题

Could someone help me with creating menus dynamically from a database? Lets say all the data from the database is already supplied by me, but I want to show a dynamic menu if a user is logged in or not.

I created some Vue components

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>

The LeftMenu component is in charge of making the menu that will make use of the database data:

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() is already done but will return an empty object if my localStorage is empty. It will but filled if I am logged in.

I am using this bit of code for it:

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

In which component should I query the database to obtain the data to render a menu for the logged in user?

If I place a function to query the database inside my App.vue component, then the application will show an error.

What should I put in the Leftmenu component ?

来源：https://stackoverflow.com/questions/42690731/vue-js-how-to-make-dynamic-menu