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>

score 0 · Answer 1 · answered Dec 15 '21 at 11:18

0

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.

answered Dec 15 '21 at 11:18

Raffobaffo

2,806
9
22

I solved the error, when vuejs starts, when I log in profile from menus, when I click on the menus on the profildasboard page, I want to open a child component inside the profildasboard page. Could you help ? – Tuana Dec 15 '21 at 11:38
If this error is solved, you should open a new question and mark this as solved. – Raffobaffo Dec 15 '21 at 11:55
I solved the error, but the missing part is how I will display that component. – Tuana Dec 15 '21 at 12:19

score 0 · Answer 2 · answered Dec 16 '21 at 05:48

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;

vuejs router children in children

2 Answers2