Vue-router nested route not loading my component page

Question

I am using Vue-router and I was needing to use a nested route, so what I did I wrote Children Key word to reference for a child component page, so my problem is when I click on Link my current URL replaced with nested route and with an ID but not load my component, and when I change Router-Linke to another component that is not nested it will load component, so I ask what are my mistakes?

route.js

{
        path: '/targets',
        name: 'target',
        component: () =>
            import ( /* webpackChunkName: "target" */ '@/views/admin/Target.vue'),
            meta: {
                middleware: [
                    auth
                ],
                title: "Targets"
            },
            children:[
                {
                    path: '/targets/:id/details',
                    name: 'target-details',
                    props: true,
                    component: () =>
                        import ( /* webpackChunkName: "target" */ '@/views/admin/TargetDetails.vue'),
                        meta: {
                            middleware: [
                                auth
                            ],
                            title: "TargetDetails"
                        }
                },
            ]
    },

target.vue

<template>
<div>
 <li class="clearfix" v-for="domain in domains" :key="domain.domain_id">{{ domain.domain }} 
                            <router-link class="more" 
                                :to="{ 
                                        name: 'target-details', 
                                        params: { 
                                            id: domain.domain_id 
                                        } 
                                    }"  >Target details <i class="fa fa-angle-right"></i>
                            </router-link>
                        </li>
</div>
</template>

TargetDetails.vue

<template>
   <div class="page-output">
      <h1>Target Details</h1>
   </div>
</template>

Michal Levý · Accepted Answer · 2020-01-07 13:09:25Z

17

Nested routes are designed to facilitate component nesting (look at the 1st "picture")

You need to include <router-view> in your target.vue component...

If you don't want content of TargetDetails.vue rendered inside target.vue, dont use children config and make a target.vue top level route instead.

answered Jan 7, 2020 at 13:09

Michal Levý

38.6k8 gold badges82 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Omda Over a year ago

Thanks @Michal Lev`y issue is solved, I remove Children Key word

Collectives™ on Stack Overflow

Vue-router nested route not loading my component page

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related