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来自您的服务器，而不是Vue应用程序。您需要设置您的服务器，以便能够解释JS路由，而无需在不存在的目录中查找文件。

在它们的docs上，Vue路由器有一些关于最常见的服务器配置的示例，看看这里。

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;