Vue Router - How can I implement this type of route?

Question

I'm new to Vue and I'm building a Vue app with a side menu which let the user navigate the website.

I'm using Vue Router, and the code is like this

<template>
  <div id="app">

    <Header />

    <SideMenu
      active="0"
    />

    <router-view/>

  </div>
</template>

I when the user clicks on one of the SideMenu links it goes to another route and the content gets generated next to the SideMenu without loading them again.

What if I wanted to have a /login route without the Side Menu and the Header?

Do I have to do this and then move the Header and Menu components inside every Route View?

<template>
  <div id="app">

    <router-view/>

  </div>
</template>

By doing that every time a user click a link the Header and the Menu loads again causing a slower app.

What can I do?

(Can I move the router-view inside another View?)

I think a nice work-around would be keeping some state variable for determining if the header should be shown or not. Unfortunately, I'm not familiar with Vue, so I don't know how this should look in the source code. — Mihail Feraru
You can just create 2 top level components loaded by 2 top level routes at the root of your router. One with the side menu logic, the other without. The component with the side menu will implement its own router-view. In the router, the top level route implementing the side menu components will have children routes that will implements your other components linked in the side menu. — Pierre Burton

whereo whereo · Accepted Answer · 2020-08-03T12:14:23

This is described in the vue router documentation. You can "chain" layouts by defining routes like in the example below. Each Vue-Component along the way needs to implement a router-view element to actually display following content.

{
  path: '/login',
  component: () => import('layouts/AuthLayout.vue'),
  children: [
    {
      path: '',
      name: 'login',
      component: () => import('pages/Login.vue')
    }
  ]
},
{
  path: '/',
  component: () => import('layouts/MainLayout.vue'),
  children: [
    {
      path: '',
      name: 'dashboard',
      component: () => import('pages/Dashboard.vue')
    }
  ]
}

Vue Router - How can I implement this type of route?

1 Answers