fix: also watch hash change and change tab accordingly

This commit is contained in:
Shariq Ansari 2024-09-27 22:36:30 +05:30
parent 97af42fad1
commit 028ad81d7f

View File

@ -1,8 +1,10 @@
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { useDebounceFn, useStorage } from '@vueuse/core'
export function useActiveTabManager(tabs, storageKey) {
const activieTab = useStorage(storageKey, 'activity')
const route = useRoute()
const preserveLastVisitedTab = useDebounceFn((tabName) => {
activieTab.value = tabName.toLowerCase()
@ -13,7 +15,7 @@ export function useActiveTabManager(tabs, storageKey) {
}
function getActiveTabFromUrl() {
return window.location.hash.replace('#', '')
return route.hash.replace('#', '')
}
function findTabIndex(tabName) {
@ -59,5 +61,20 @@ export function useActiveTabManager(tabs, storageKey) {
preserveLastVisitedTab(currentTab)
})
watch(
() => route.hash,
(tabValue) => {
if (!tabValue) return
let tabName = tabValue.replace('#', '')
let index = findTabIndex(tabName)
if (index === -1) index = 0
let currentTab = tabs.value[index].name
preserveLastVisitedTab(currentTab)
tabIndex.value = index
},
)
return { tabIndex }
}