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

user_13476752 0
Viewed 257

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?)

vue-router vue.js javascript
1 Answers

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')
    }
  ]
}
user_82118930
Related