vuejs router children in children

Question

I want to show child component in component with vue js, but I couldn't figure out how to do it. Could you help. When I click profile from the menu, "http://localhost:3000/admin/profile" logs in. When I click on the sub menus in the "ProfileDashboard", I want the child component to open. I think like accordion style.

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

A 404 for is coming from your server, not from the Vue application. You need to setup your server to be able to interpret the JS routing without going to look for files in directories that do not exist.

On their docs, Vue Router have some example for the most common server configurations, take a look here.

Answer 2

In order to do like that, you should create particular js file like this:

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;