vue导航菜单调用PHP后台数据

数据库设计：

后台PHP输出所有菜单数据（index.php）：

<?php
header("Access-Control-Allow-Origin:*");
header("Content-type:text/json;charset=utf-8");
error_reporting(0);
require_once ("database.php");

$sql = "select * from v_menu";
$re = excute_query($sql);
$arr=[];
while ($row = $re -> fetch_assoc()) {
    if($row["isContent"]=="0"){
        $row["isContent"]=false;
    }else{
        $row["isContent"]=true;
    }
    array_push($arr,$row);
}
echo json_encode($arr);
?>

输出结果：

[{"id":"1","name":"\u7f51\u7ad9\u9996\u9875","pId":"-1","isContent":false},

{"id":"2","name":"\u5173\u4e8e\u6211\u4eec","pId":"-1","isContent":true},

{"id":"3","name":"\u516c\u53f8\u7b80\u4ecb","pId":"2","isContent":true},

{"id":"4","name":"\u516c\u53f8\u6587\u5316","pId":"2","isContent":true},

{"id":"5","name":"\u8363\u8a89\u8d44\u8d28","pId":"2","isContent":true},

{"id":"6","name":"\u5b9e\u9a8c\u5ba4\u8ba4\u8bc1","pId":"-1","isContent":true},

{"id":"7","name":"\u5b9e\u9a8c\u5ba4\u5e03\u5c40\u5efa\u7acb","pId":"6","isContent":true},

{"id":"8","name":"\u4eea\u5668\u8bbe\u5907\u9009\u62e9","pId":"6","isContent":true},

......

]

vue文件（将数据转化为树级目录）：

new Vue({
            el: "#app",
            data() {
                return {
                    data: [],//查看php文件夹下的menu.json文件
                }
            },
            created() {
                this.getAllList();
            },
            methods: {
                getAllList() {
                    axios
                        .get('http://localhost/PHP/vue.js/vue+.html+axios+php/sjlr/php/index.php')
                        .then(response => {
                            let data1 = response.data;
                            // console.log(data);
                            let tree = [];
                            for (let i = 0; i < data1.length; i++) {
                                //pId为-1的父节点
                                if (data1[i].pId == '-1') {
                                    let obj = data1[i]
                                    obj.list = []
                                    tree.push(obj)
                                    data1.splice(i, 1)
                                    i--
                                }
                            }
                            if (data1.length != 0) {
                                for (let i = 0; i < tree.length; i++) {
                                    for (let j = 0; j < data1.length; j++) {
                                        if (data1[j].pId == tree[i].id) {
                                            let obj = data1[j]
                                            obj.list = []
                                            tree[i].list.push(obj)
                                            data1.splice(j, 1)
                                            j--
                                        }
                                    }
                                }
                            }
                            this.data = tree
                        })
                        .catch(function(error) {
                            // 请求失败处理
                            console.log(error);
                        });
                },
            }
        })

data数据：

........

生成菜单导航：

<el-menu theme="dark" class="el-menu-demo" mode="horizontal" background-color="#1d5daf" text-color="#fff" active-text-color="#0e81ce">
                        <template v-for="(item,index) in data">
                            <el-submenu :index=item.id v-if="item.isContent">
                                <template slot="title">
                                    {{item.name}}
                                </template>
                                <template v-for="(menu,index) in item.list">
                                    <el-menu-item :index=menu.id>{{menu.name}}</el-menu-item>
                                </template>
                            </el-submenu>
                            <el-menu-item :index=item.id v-else>{{item.name}}</el-menu-item>
                        </template>
                    </el-menu>