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

Добрый день!

На данный момент у меня на сайте все страницы делятся на 2 типа (blade-шаблона).
Шаблон №1
51d06cd8bc8f452689117d4f9724295f.png
Шаблон №2
1fd120f500e443fb8decfce343327bc5.png

Причем по шаблону №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.

Подскажите, пожалуйста, как правильно реализовать подобное? В какую сторону смотреть?
  • Вопрос задан
  • 2879 просмотров
Решения вопроса 1
kulakoff
@kulakoff Куратор тега Vue.js
Vue.js developing
Как вариант создать шаблон №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#Имен...
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы