@dwaynehicks

Как реализовать одинаковую шапку на всех страницах, но разные заголовки и фоновые изображения в ней (vue.js)?

Добрый день! Недавно работаю с vue.js и столкнулся с такой "проблемой". У меня есть множество страниц в которых содержится одинаковая шапка (вынесена в компонент header.vue), но разные текстовые заголовки и фоновые изображения в ней (изображение выведено через тег img).

Каким образом это правильно реализовывается во vue.js? У меня 20 страниц с одинаковой шапкой, но разным контентом в ней. Не буду же я создавать 20 шаблонов ради разных текстовых заголовков и фоновых картинок. Это было бы глупо. Уверен есть нормальный способ....Помогите пожалуйста.

P. S. Хотелось бы наиболее правильный и оптимальный способ.
  • Вопрос задан
  • 453 просмотра
Решения вопроса 3
profesor08
@profesor08 Куратор тега JavaScript
Решение в лоб - каждая страница у тебя содержит подключение всех необходимых блоков, и ты передаешь через параметры свой заголовок: https://ru.vuejs.org/v2/guide/components-props.html

Решение через vuex: https://vuex.vuejs.org/
Тут на каждой странице пишешь заголовок в store
Ответ написан
@McBernar
Через пропсы и слоты. В пропсы можно прокидывать урлы фонов, через слоты заголовки и в принципе любой другой контент.

Это же основа фреймворка. Зачем он вам вообще понадобился, если вы не понимаете базовых принципов?
Ответ написан
@HeTpe3B
У вас же заголовок в шапке будет зависеть от того на какой странице находится пользователь?

Посмотрите в сторону метаданных роутера

На мой взгляд это наиболее релевантно для данного случая
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
22 окт. 2019, в 00:09
3500 руб./за проект
21 окт. 2019, в 22:35
500 руб./за проект