Vue.JS - Main layout component and routing

Question

I have a main layout component ( who is composed by a fixed top header and a left side menu with multiple links created by router-link component ) and a "dynamic" layout component who is the hearth of the page.
I would like this to change the center of my site by routing on different components according to the clicked link on the left menu.
In order to do this, I have placed the router-view in my App.vue who is the higher level of Vue component in my app, like in the following code :

<template>
  <div id="app">
    <layout>
      <router-view/>
    </layout>
  </div>
</template>

There is my main layout component, who contains the header and the left menu, this is the fixed part of my website :

<template>
 <v-app>
   <loader></loader>
   <v-layout row wrap>
     <v-flex xs12>
       <stickyHeader></stickyHeader>
     </v-flex>
     <v-flex xs2>
       <sideNavMenu></sideNavMenu>
     </v-flex>
   </v-layout>
 </v-app>
</template>

My sideNavMenu component contains multiple router-link components like this

<router-link to="/home">Accueil</router-link>

that I'm catching in my router, to attach a specific Url to a vue component

export default new Router({
  routes: [
   {
     path: '/home',
     name: 'home',
     component: home
   }
 ]
})

But it doesn't work, and I don't understand why. Hence, I need help :)

I mean the path you see after your application boot. Anyway try to add a fallback route like this { path: '*' , redirect: '/' } at the end of the routes array — Vanojx1
– Vanojx1, Commented May 14, 2018 at 12:25

tony19 · Accepted Answer · 2022-07-15 05:39:48Z

2

Imagine you're a Router-View and you have a friend called Layout. Your friend invites you to her home to watch a movie together. You like her so you can't wait for it until the night of the meeting comes and you realize she didn't give you her address.

That's what happens in the code. Router-view knows it should show up at Layout but has no idea where.

<layout>
  <router-view/>
</layout>

Template structure like above means that <router-view> is meant to be rendered in <layout> in the place determined by the <slot> element. The slot is not provided, so the router-view doesn't know where exactly it should be rendered.

Please read https://v2.vuejs.org/v2/guide/components-slots.html for more details.

You can place it for example here:

<template>
 <v-app>
   <loader></loader>
   <v-layout row wrap>
     <v-flex xs12>
       <stickyHeader></stickyHeader>
     </v-flex>
     <v-flex xs2>
       <sideNavMenu></sideNavMenu>
     </v-flex>
     <slot />
   </v-layout>
 </v-app>
<template>

edited Jul 15, 2022 at 5:39

tony19

140k23 gold badges281 silver badges354 bronze badges

answered May 15, 2018 at 8:11

Gustojs

665 bronze badges

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

2 Comments

Alex Lacayo Over a year ago

😂 too funny but helpful

Pavan J Over a year ago

One of the best narrated answers I have come across!

Collectives™ on Stack Overflow

Vue.JS - Main layout component and routing

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related