vuejs 路由器子项中的子项答案

【问题标题】：vuejs router children in childrenvuejs 路由器子项中的子项
【发布时间】：2022-01-18 12:47:37
【问题描述】：

我想用 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>

【问题讨论】：

标签： vue.js vuejs-routing

【解决方案1】：

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

在他们的 docs 中，Vue Router 提供了一些最常见的服务器配置示例，请查看 here。

【讨论】：

我解决了错误，当vuejs启动时，当我从菜单登录配置文件时，当我点击profildasboard页面上的菜单时，我想在profildasboard页面内打开一个子组件。你能帮忙吗？
如果此错误已解决，您应该打开一个新问题并将其标记为已解决。
我解决了错误，但缺少的部分是我将如何显示该组件。

【解决方案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;

【讨论】：