I have code like this. It generates tabs object for my components
export function generateRouterTabs (tabs?: RouteRecordRaw[] | undefined, tabsName?: string): {
name: string
tabs: IRouterTab[]
} {
const route = useRoute()
const mappedName = tabsName || route.name as string | undefined || ''
const mappedTabs = (tabs || route.matched.find(route => {
return route.name === route.meta.parentName
})?.children) || []
return {
name: mappedName,
tabs: mappedTabs.map(_route => ({
label: _route.meta?.label || '',
routeName: _route.name as string,
appComponentID: _route.meta?.appComponentId
}))
}
}
Inside of script:setup of one of those components, I wrap this function call in a computed property like this:
const tabs = computed(() => generateRouterTabs())
It fails with an error, saying
Cannot read properties of undefined, reading 'name'
and points to this line of code
const mappedName = tabsName || **route.name** as string | undefined || ''.
I've tried using optional chaining, but that breaks the app and does not return any tabs or a name. Also I tried to pass tabs and tabsName as arguments and it did work. Though, the project is quite big and I wouldn't want to refactor it everywhere, especially if the bug comes from the vue dev team.
To remind you, it's only after I upgrade vue to 3.4+. The project exists for about 2 years and this was not a problem before.
Be very grateful for any assistance.
Also, you can ask me for any additional info that might help you look into the problem deeper.