VueJS Child's Component Routing does not work-CodePudding

Trying to access child route it but does not child route it says not found and when I put path in children /:menuid/page/sample2/child1 it open up parent route that mean render data of Sample2.

What thing I am missing here please guide.

main url should be localhost:8080/12/page/sample2 child url suppose to be localhost:8080/12/page/sample2/child

{
        path: '/:menuid/page/sample2',
        name: 'Page1',
        component: () => import('@/controller/Sample2.vue'),
        children: [
            {
                path: "/:id",
                name: "Child1",
                component: () => import('@/controller/child1.vue'),
            }
        ]
}

In another component : <router-link :to="res.id">{{value}}</router-link>

CodePudding user response：

As per your statement when I put path in children /:menuid/page/sample2/child1 it open up parent route that mean render data of Sample2. the behaviour is correct you have to use <router-view> in the Sample2 file where you want to render your child1 component.

Try this way. Hope it will resolve your issue.

Also use :id instead of /:id as @DengSihan suggested