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

Gustojs Gustojs · Accepted Answer · 2018-05-15T08:11:52

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://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>

Vue.JS - Main layout component and routing

1 Answers