Вы работаете над приложением Nuxt.js и изо всех сил пытаетесь выделить активный пункт меню? Не бойтесь, потому что в этой статье мы рассмотрим несколько методов достижения желаемого эффекта. Мы углубимся в примеры кода и объясним каждый метод в разговорной форме, чтобы вы могли легко следовать инструкциям. Давайте начнем!

1. Активный класс на основе CSS:
   Один из самых простых способов выделить активный пункт меню в Nuxt.js — использовать CSS. Вы можете добавить определенный класс к активному пункту меню с помощью директивы :classи соответствующим образом оформить его. Вот пример:

   <template>
    <div>
      <ul>
        <li :class="{ 'active': isActive('/home') }"><a href="/home">Home</a></li>
        <li :class="{ 'active': isActive('/about') }"><a href="/about">About</a></li>
        <!-- Add more menu items here -->
      </ul>
    </div>
   </template>
   <script>
   export default {
    methods: {
      isActive(route) {
        return this.$route.path === route;
      },
    },
   };
   </script>
   <style scoped>
   .active {
    /* Add your active menu item styles here */
   }
   </style>

   В приведенном выше коде мы используем метод isActive, чтобы проверить, соответствует ли текущий маршрут маршруту пункта меню. Если это так, мы применяем класс active, чтобы выделить пункт меню.

2. Активный класс Nuxt Link:
   Nuxt.js предоставляет встроенный способ обработки активных пунктов меню с помощью компонента nuxt-link. По умолчанию к активной ссылке автоматически применяется класс active. Вот пример:

   <template>
    <div>
      <ul>
        <li><nuxt-link to="/home">Home</nuxt-link></li>
        <li><nuxt-link to="/about">About</nuxt-link></li>
        <!-- Add more menu items here -->
      </ul>
    </div>
   </template>

   При таком подходе Nuxt.js добавляет класс activeк активному пункту меню на основе текущего маршрута.

3. Защитники навигации Vue Router.
   Другой способ выделить активный пункт меню — использовать защитные ограждения навигации Vue Router. Вы можете прослушивать изменения маршрута и программно обновлять активный пункт меню. Вот пример:

   // In your Nuxt.js plugin or main.js
   import { createRouter } from 'vue-router';
   const router = createRouter({
    // Router configuration
   });
   router.afterEach((to) => {
    const activeMenuItem = document.querySelector('.active');
    if (activeMenuItem) {
      activeMenuItem.classList.remove('active');
    }
    const currentMenuItem = document.querySelector(`a[href="${to.path}"]`);
    if (currentMenuItem) {
      currentMenuItem.parentNode.classList.add('active');
    }
   });

   В приведенном выше коде мы используем навигационную защиту afterEach, чтобы удалить класс activeиз текущего активного пункта меню и добавить его в новый активный пункт меню на основе маршрут.

Это всего лишь несколько методов, которые вы можете использовать для выделения активного пункта меню в вашем приложении Nuxt.js. Смело выбирайте тот, который лучше всего подходит для вашего проекта. Приятного кодирования!