Как в Nuxt3 изменить класс элемента на определенной странице?

Как добавить определенный класс элементу header в навигации, если это не главная страница?
  • 24 августа 2024 г. 20:13
Ответы на вопрос 1
1. Чтобы изменить класс элемента на определенной странице в Nuxt3, можно использовать директиву v-bind:class. Например, если вы хотите добавить класс 'active' к элементу при нахождении на странице с путем '/about', вы можете сделать следующее:

```html
<template>
  <div v-bind:class="{ active: $route.path === '/about' }">
    <!-- Ваш элемент -->
  </div>
</template>
```

2. Чтобы добавить определенный класс элементу header в навигации, если это не главная страница, вы можете использовать условный оператор v-if. Например, если вы хотите добавить класс 'secondary' к элементу header в навигации на всех страницах, кроме главной, вы можете сделать следующее:

```html
<template>
  <header v-if="$route.path !== '/'" class="secondary">
    <!-- Навигационные элементы -->
  </header>
</template>
```

Таким образом, вы сможете управлять классами элементов на определенных страницах или условиях в Nuxt3.
Похожие вопросы