@dwaynehicks

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

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

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

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

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

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

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

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

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

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