How to implement pages based on different templates in vue.js?

Question

css

Good afternoon!
At the moment, all pages on my site are divided into 2 types (blade-template).

Template #1

Template #2

Moreover, according to template No. 1, only one page is built - the main one, all other pages are built according to template No. 2.
The menu elements in both templates are identical, all links from the main page lead to pages that are built according to template No. 2.
At the moment, I don't know how to build pages from template #2.
As I vaguely imagine it: You
need to create a separate component for template #2 (for example, Page.vue), which, in addition to the main static framework, will output to <router-view></router-view>or into a special subcomponent <page-content></page-content>, the component of the required current page.
Now I have the following in routes.js:

routes.js

import VueRouter from 'vue-router';

let Welcome = require('./components/Welcome.vue');
let Contacts = require('./components/Contacts.vue');

let routes = [
    {
        path: '/',
        component: Welcome
    },
    {
        path: '/contacts',
        component: Contacts
    }
];

export default new VueRouter({routes});

Those. if now from the main one follow the link '/contacts', then I get to the page with the content of the Contacts.vue component, and I need this component (and all similar ones) to also have a static part, built according to template No. 2.
Can you please tell me how to implement something like this? Which way to look?

Answer 1

As an option, create template #2 using the slot:

<template>
   <div>
     <header></header>
     <sidebar></sidebar>
     <slot name="content"></slot>
   </div>
</template>

Next, create site pages using this template:

<!-- some page -->

<my-layout>
  <div slot="content">
    <!-- page content -->
 </div>
</my-layout>

Documentation: https://ru.vuejs.org/v2/guide/components.html#Name...