How To Render Header And Sidebar After Login Using Vue

I have a Vue.js application, currently I render it using different pages. I have run into an issue where when I login the first time it will only render the single main component t

Solution 1:

You can put your page after login with a parent like this :

const routes = [
  {
    path: '/',
    component: () => import('layouts/MyLayout.vue'),
    children: [ // ALL ROUTES AFTER LOGIN
      { path: '', component: () => import('pages/Index.vue') }
    ]
  }
]

and in MyLayout.vue you can put your header and sidebar

your MyLayout.vue :

<template><div><Header></Header><SideBar></SideBar><section><router-view></router-view></section></div></template><script>importHeaderfrom'../layouts/Header.vue'importSideBarfrom'../layouts/Sidebar.vue'

....