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

Inconsistent behavior between Chrome and Firefox when using AngularJS $resource GET method: success in Chrome but error

Transitioning from using a jQuery get request to utilizing Vue.js

jQuery for validating input fields with positive integers only using regular expressions

JavaScript: unable to locate information within JSON reply

jQuery function for shuffling the order of a random div?

Error: Unable to access the 'ht_4year_risk_opt' property because it is null

Locate a specific item in an array using AngularJs based on a key and present its value on the View

Passing parameters to a Vue.js @click method in Laravel 6: A step-by-step guide

What is the process for displaying a hidden div using a button?

What could be the reason behind jQuery replacing the entire span with .text?

Initial button click fails to trigger onclick event

Encountering issues when adding information to a React table

The clearing of sessions is not supported by Node.js / Express.js

There was a TypeError encountered in a Node application, stating: "Unable to access the 'trim' property of an undefined

Retrieving various pieces of data in Express

Unleashing the full potential of ajax through endless scrolling performance

Is there a way to tally up the overall count of digits in a number using TypeScript?

Combining two arrays by finding common elements

Javascript-generated HTML elements are invisible

Is there a way to invoke a function using $scope within HTML that has been inserted by a directive in AngularJS?