vue.js - vuejs 路由器子项中的子项

Question

我想用 vue js 在组件中显示子组件，但我不知道该怎么做。你能帮忙吗。当我从菜单中单击配置文件时，“http://localhost:3000/admin/profile”会登录。当我单击“ProfileDashboard”中的子菜单时，我希望打开子组件。我觉得像手风琴风格。

const routes = [
    {
        path: '/',
        component: DashboardLayout,
        redirect: '/admin/overview'
    },
    {
        path: '/admin',
        component: DashboardLayout,
        redirect: '/admin/overview',
        children: [
            {
                path: 'overview',
                name: 'Overview',
                component: Overview
            },
            {
                path: 'profil',
                name: 'Profil',
                component: ProfilDashboard,
                children: [
                    {
                        path: 'siparisgecmisi',
                        name: 'siparisgecmisi',
                        component: Gecmis
                    }
                ]
            }
        ]
    },
    {path: '*', component: NotFound}
]

export default routes

ProfilDashboard.vue

<router-link to="/admin/profil/siparisgecmisi" tag="li" class="list-group-item"><a>My order history</a></router-link>

Answer 1

404 for 来自您的服务器，而不是来自 Vue 应用程序。您需要将服务器设置为能够解释 JS 路由，而无需在不存在的目录中查找文件。

在他们的文档中，Vue Router 提供了一些最常见的服务器配置示例，请看这里。

Answer 2

为了做到这一点，你应该像这样创建特定的 js 文件：

const menuTree = [
        {
            name: "Main menu",
            link: "/ ",
            icon: "main_icon",
            list: [
                {
                    name: "Sub menu 1",
                    link: "/",
                    icon: "any_icon",
                    list: [
                        {
                            name: "sub sub menu 1",
                            link: "/any/route",
                        },
                        {
                            name: "sub sub menu 2",
                            link: "/any/route/1"
                        },
                    ]
                }
            ]
        }
    ];

export default menuTree;