Rendering nested routes in Vue router with the parent component

Question

Rendering nested routes in Vue router with the parent component

I attempted to nest my routes using Vue router, but encountered some difficulties

{
    path: '/admin',
    name: 'Admin', component: () => import('pages/Admin'),
    children:[
      { path: 'stock', name: 'Stock', component:()=> import('pages/Stock')},
    ]},

After some troubleshooting, I discovered that I needed to place <router-view> inside the parent component for it to work properly.

However, when I try to load the page /admin/stock, both components are rendered on top of each other. Why does the parent component (/admin page) still display?

It's worth noting that without nesting the routes, everything worked perfectly fine and the components rendered separately (as shown below).

{
    path: '/admin',
    name: 'Admin', component: () => import('pages/Admin'),
    children:[
     //no nested route
    ]},
  { path: 'admin/stock', name: 'Stock', component: ()=> import('../pages/Stock')},

Thank you for your assistance

javascript vue.js vue-component vue-router

Answer 1

Answer №1

For the "Admin" component, it is recommended to include a router-view tag. This way, the Admin component can serve as a layout and render the appropriate children based on the current route.

Here is an example:

Admin Component:

<template>
    <div>
        <div>
            Content that appears in all child components
        </div>
        <router-view>
            <div>"Admin" page content</div>
        </router-view>
    </div>
</template>

Stock component:

<template>
    <div>
        "Stock" content
    </div>
</template>

When navigating to /admin, the following will be rendered:

<div>
    <div>
        Content that appears in all child components
    </div>
    <div>"Admin" page content</div>
</div>

And when visiting /admin/stock, this will be rendered:

<div>
    <div>
        Content that appears in all child components
    </div>
    <div>"Stock" content</div>
</div>

For a more detailed example, refer to this link.

If you do not need to reuse the "Admin" component layout, you have the option to define routes without nesting them as shown in the second case mentioned.

Answer 2

For the "Admin" component, it is recommended to include a router-view tag. This way, the Admin component can serve as a layout and render the appropriate children based on the current route.

Here is an example:

Admin Component:

<template>
    <div>
        <div>
            Content that appears in all child components
        </div>
        <router-view>
            <div>"Admin" page content</div>
        </router-view>
    </div>
</template>

Stock component:

<template>
    <div>
        "Stock" content
    </div>
</template>

When navigating to /admin, the following will be rendered:

<div>
    <div>
        Content that appears in all child components
    </div>
    <div>"Admin" page content</div>
</div>

And when visiting /admin/stock, this will be rendered:

<div>
    <div>
        Content that appears in all child components
    </div>
    <div>"Stock" content</div>
</div>

For a more detailed example, refer to this link.

If you do not need to reuse the "Admin" component layout, you have the option to define routes without nesting them as shown in the second case mentioned.

Rendering nested routes in Vue router with the parent component

Answer №1

Similar questions

What is the best way to handle sequential $http calls in AngularJS? Specifically, I want to make the second $http call dependent on the response of the first

Struggling with the migration of routes from react-router v3 to v4

Unreliable static URLs with Next.js static site generation

Collaborate and pass around SQL connections among different modules

Looking for the location of a matching brace in a dataset?

I'm experiencing trouble with Shopify as it appears to be failing to execute

Automated submission feature for Angular scanning technology

Vue, socket.io and Express Session all reset with each new page load

Display the printed outcome in a fresh window

Please input only 0s and 1s into the designated field

Learn the process of assigning the present date using the jQuery UI date picker tool

During the installation process of Next JS, I faced a challenge that hindered

What is the most effective method for populating data within a browser window?

How can I eliminate the default background of Mui tooltip and personalize it in react?

What is the best method to obtain the following id for an image?

Searching for an element using Python's Selenium and JavaScript

The AJAX response containing jQuery is failing to produce any visible changes

What are the steps to utilizing an npm package that simply encapsulates my JavaScript code?

What is the process of integrating an ejs view engine with express on Netlify?

BreezeJS model, Knockout integration, empty relationships