How to use router-view inside router-view (not nested routes)?

Question

Laravel

I'll try to describe what I want to do) I
started learning vue and wanted to make a small admin panel for myself.
Made an authentication form and the main page of the logged in user. Everything is working. But, as I understand it, when switching to another route, the entire page will be redrawn, which seems wrong when the user is already logged in.
Those. there are authentication pages, then I will make a registration page, password recovery, etc. When switching between them, everything is clear, the page is redrawn.
But after authentication, the page of the logged in user is loaded, it consists of a header, a sidebar with a menu, a footer and the main content.
Here, in theory, only the content should change during the next transitions.
The code that is uploaded to git because. there is a lot of it for the message:
https://github.com/shelestovas/vue-test
Well, in summary, the question is how to organize the structure of the application correctly so that everything works correctly?
Thank you!
I thought about creating different vue instances, but I can’t figure out how to connect them later

Answer 1

You should have a view component:

<!-- index.vue -->
<div>
  <header/>
  <menu/>
  <content>
    <router-view></router-view>
  </content>
<footer/>
</div>

Accordingly, when navigating, the specified component will be displayed.
Routes should look something like this:

{
  path: '/',
  component: index,
  children: [
    { 
      path: 'dashboard',
      component: dashboard
    },
    { 
       // other route
    }
  ]
}