Nuxt & Vue - Элемент пользовательского интерфейса сохраняющегося активного меню в событии кнопки возврата браузера

Question

Моя проблема заключается в том, что для данного выбранного элемента меню существует состояние «выбрано», которое просто затемняет элемент для обратной связи с пользователем. Проблема заключается в том, что активный элемент сбрасывается при нажатии кнопки «Назад» в браузере, когда маршрут по-прежнему изменяется правильно. Я собрал быструю функциональную демонстрацию того, что здесь происходит: https://codepen.io/soodohcool/pen/xxbambE

/* the codepen is for illustrating the behavior of my issue */

нажмите несколько раз на пункты меню, затем нажмите кнопку "имитация назад", чтобы увидеть, что случается. Обратите внимание, что заголовок страницы изменяется правильно, но активное состояние исчезает в пункте меню.

Я использую Nuxt / Vue с пользовательским интерфейсом Element в моем реальном проекте. Я думал, что использование промежуточного программного обеспечения на маршрутизаторе было бы уместным, чтобы просто установить опцию 'default-active' в меню при изменении маршрута, но я новичок в Nuxt и хотел получить некоторые профессиональные данные, прежде чем я собрал что-то вместе, что может быть плохой практикой

Любая помощь с благодарностью. Если что-то требует разъяснений, пожалуйста, дайте мне знать, я здесь впервые.

Заранее спасибо!

Answer 1

Оказывается, я смог решить это с небольшим экспериментом, и это было удивительно просто.

1. Установите по умолчанию-активный prop в $ route.path
2. Установите индекс элемента на соответствующий путь

Вот что сработало для меня, надеюсь, это поможет кому-то в будущем

Answer 2

В вашем файле nuxt.config. js добавьте следующее:

router: {
    linkExactActiveClass: 'active'
}

nuxt не использует активный класс по умолчанию для активных ссылок.

Также вам понадобится использовать компонент <nuxt-link> для привязки активного класса к ссылке активной страницы https://nuxtjs.org/api/components-nuxt-link/