Как сделать стиль шапки в одном компоненте одним, а в другом компоненте другим?

Question

[Vladislav]

Шапка находится в общим врапере и видна на всех страницах компонентов, мне надо чтобы на главной у неё был один стиль, а на всех других другой, в моем случае background transparent сменяется на background #ccc

Answer 1

[0xD34F]

<div :class="headerClass">

computed: {
  headerClass() {
    return в зависимости от this.$route;
  },
},

UPD. https://jsfiddle.net/ch80oday/

Comments

[Vladislav]

0xD34F а что он вернет? как прописать именно для v-header.vue?

[0xD34F]

Vladislav, то, что вы укажете. В данном случае вам следует указать имя css-класса. Дополнил ответ примером.

Answer 2

[Andrey Vasilev]

Вообще лучше подключать header & footer на всех страницах типо такого:

routes.forEach(({ components: { header, footer } }, i) => {
	if (!header) routes[i].components.header = HeaderTemplateRetail
	if (!footer) routes[i].components.footer = FooterTemplateRetail
})

А если требуется где-то подключить отдельный футер или хедер, то можно просто сделать вот так:

{
		path: "/help/vacancy/",
		components: { header: HeaderTemlateVacancy, default: Vacancy, footer: FooterTemlateVacancy },
		props: true,
	},

Comments

[Vladislav]

В каком файле прописывать цикл?

[Andrey Vasilev]

Vladislav, файл где задаются все роуты