CODEWITHSUNDEEP
javascriptvue.jsvue-router
Tanmay
Tanmay

Reputation: 3189

Vue router-view loading parents component instead of its own

I have a route configuration like this:

{
    path: '/',
    component: Dashboard,
    meta: { requiresAuth: true },
    children: [
        { path: 'home', components: { container: Home } },
        {
            path: 'post',
            components: { container: Post },
            children: [
                { path: 'add', components: { container: Add } }
            ]
        },
    ]
},

I have two <router-view>s, one is named container and the other is not named. I am expecting the Add component to be loaded into the container router-view when I visit /post/add . But it's loading the Post component. What am I missing?

EDIT:

Post.vue:

<template>
    <div>
        <p>I am <code>./views/post/Post.vue</code></p>
    </div>
</template>

Upvotes: 1

Views: 615

Answers (1)

varun agarwal
varun agarwal

Reputation: 1509

Try this, remove the Post component from the parent and add a new child component with path: ''. It'll look like this - 

{
  path: 'post',
  component: // Include a component which only renders the router-view
  children: [
    { path: '', components: { container: Post } },
    { path: 'add', components: { container: Add } }
  ]
},

Created a repl for your reference

Upvotes: 3

Related Questions