Как в vue.js реализовать страницы, построенные по разным шаблонам?

Question

[sv8]

Добрый день!

На данный момент у меня на сайте все страницы делятся на 2 типа (blade-шаблона).

Шаблон №1

Шаблон №2

Причем по шаблону №1 построена только одна страница - главная, все остальные страницы строятся по шаблону №2.
Элементы меню в обоих шаблонах идентичные, все ссылки с главной ведут на страницы, которые построены по шаблону №2.

На данный момент я не знаю, как построить страницы по шаблону №2.
Как я это смутно представляю:
Необходимо создать отдельный компонент для шаблона №2 (например, Page.vue), который помимо основного статического каркаса, будет выводить в <router-view></router-view> или в специальный подкомпонент <page-content></page-content>, компонент необходимой текущей страницы.

Сейчас у меня в 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});

Т.е. если сейчас с главной перейти по ссылке '/contacts', то я попадаю на страницу с содержимым компонента Contacts.vue, а мне необходимо, чтобы данный компонент (и все ему аналогичные) имели также статическую часть, строились по шаблону №2.

Подскажите, пожалуйста, как правильно реализовать подобное? В какую сторону смотреть?

Answer 1

[Evgeny Kulakov]

Как вариант создать шаблон №2, используя слот:

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

Далее создаете страницы сайта используя этот шаблон:

<!-- some page -->

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

Документация: https://ru.vuejs.org/v2/guide/components.html#Имен...

Comments

[sv8]

Большое вам спасибо! Проблема решена. :)