Как показать правильную вложенную дочернюю вкладку, когда страница перезагружается или обновляется в Vue

Question

Я работаю над реализацией вложенной вкладки с использованием пользовательского компонента вкладки в Vue. При обновлении sh или перезагрузке страницы для вложенной дочерней вкладки активная вкладка не отображается. У меня вопрос, как показать активную родительскую вкладку, когда страница обновляется / перезагружается для правильной активной дочерней вкладки. Здесь я предоставляю код для лучшего понимания.

https://codesandbox.io/s/morning-leaf-zxlt7?file= / src / components / TabView. vue

Чтобы уточнить больше, предположим, я просматриваю здесь к Операции 2 На вкладке Операция

Теперь, когда я обновлю sh страницу, я получил это -

Мне нужно нажать на родительскую вкладку (вкладка «Операция»), чтобы увидеть активную дочернюю вкладку (операция 2)

Пожалуйста, помогите мне решить эту проблему , Спасибо.

Answer 1

Если я правильно понимаю, ваша цель - сохранить выбранные вкладки открытыми после перезагрузки / обновления страницы. В этом случае вам нужно сохранить состояние этого компонента, создав новые элементы в localStorage вручную, вызвав localStorage.setItem('key', 'value') и затем вернув эти значения обратно в хук жизненного цикла mounted() вашего компонента с помощью localStorage.getItem('key', 'value'). В качестве альтернативы вы можете использовать Vuex с vuex-persist плагином, который будет обрабатывать сохранение и загрузку состояния вашего приложения для вас.

Answer 2

После редактирования кажется, что вы хотите, чтобы приложение go указало c маршрут после обновления sh. Возможно, вы могли бы реализовать vue -router и сохранить самый последний маршрут в localstorage, а затем перенаправить пользователя на указанный самый последний маршрут при обновлении приложения.

Вам потребуется: внедрить vue -рутер, чтобы открытые вкладки были сохранены в маршрут, использовать хуки или миксин, чтобы сохранить самый последний маршрут в localalstorage, использовать хуки созданный () в приложении. Vue, чтобы загрузить самый последний маршрут (если есть) и использовать programmati c навигация к пользователю pu sh по загруженному последнему маршруту.