A router view in a router view

Question

I have an application with authentication system and a backend dashboard. By default the route show the authentication component :

{
  path: "/",
  name: "Authentication",
  component: Auth
},

The App.view contains the Once logged in I'm redirected to another vue component "home" :

{
  path: "/dashboard",
  name: "home",
  component: Home,
},

So far, so good. In this home component i have some HTML with menu and I want to to show component in the same page.

Here is a sample of html from the home template

<div>
  <router-link :to="'/dashboard/user'">User</router-link>
  <router-link :to="'/dashboard/stats'">Stats</router-link>

  <app-user></app-user>
  <app-stats></app-stats>
</div>

I also created the routes for those components in router but while clicking on the link it shows a white page. I just began vue.js and I'm sure it's an easy stuff to manage. My objective is to display the component according to the page which is displayed.

Sarjerao Ghadage Sarjerao Ghadage · Accepted Answer · 2019-09-20T09:03:41

Update your routing file like below so parent module can load its children in their respective router outlet.

Place <router-view></router-view> in your dashboard component so it will load its children. If you visit /dashboard/user then UserCompoent will get render in <router-view></router-view> of dashboard component.

{
  path: "/dashboard",
  name: "home",
  component: Home,
     children: [
        {
          path: 'user',
          component: UserComponent,         
        },
         {
          path: 'state',
          component: StateComponent,         
        }       
      ],
},

A router view in a router view

1 Answers