After creating nested routes for Vue Router, I encountered a problem while using the routes to generate a navigation menu. Currently, I am using route.path in 'router-link :to=' which only gives me a part of the path. I want to include the absolute path that includes all parent paths as well. Is there a way to achieve this? I attempted to iterate over all routes and set a property that would include parent paths, but I couldn't come up with a functional solution.
{ path:'/meteorologija', name:'meteorologija', component:()=>import('../pages/BlogPage'), children:[
{
path:'/meteorolosko-bdenje', name:'meteorolosko bdenje', component:()=>import('../pages/BlogPage'),
children:[
{ path:'/aktuelni-podaci', name:'aktuelni podaci', component:()=>import('../pages/BlogPage'),
children:[
{ path:'/podaci', name:'Podaci', component:()=>import('../pages/BlogPage') },
{ path:'/trenutne-temerature', name:'Trenutne temperature', component:()=>import('../pages/BlogPage') },
{ path:'/ekstremne-temperature', name:'Ekstremne Temperature', component:()=>import('../pages/BlogPage') },
{ path:'/pritisak', name:'Pritisak', component:()=>import('../pages/BlogPage') },
{ path:'/vjetar', name:'Vjetar', component:()=>import('../pages/BlogPage') },
{ path:'/kolicina-padavina', name:'Kolicina padavina', component:()=>import('../pages/BlogPage') },
{ path:'/radarska-slika', name:'Radarska Slika', component:()=>import('../pages/BlogPage') },
]
},
I'm currently working on a function that will retrieve the path of deeply nested objects, incorporating all parent object paths:
t(routes, path={}){
routes.forEach((r,i)=>{
if(r.children){
// path+= r.path;
this.t(r.children, path);
}
});