I created nested routes for vue router, and I am using that routes for data to create navigation menu. And for the 'router-link :to=' i am currently using route.path. Issue with that is that that is only part of the path and want to put absolute path that includes parents paths aswell. Is there some way to do this. I also tried to iterate over all routes and to set some property that will include parent paths, but i couldnt write good function.
{ 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') },
]
},
This is the function that i am trying to write that will get path of deeply nested object that includes paths of all parent objects
t(routes, path={}){
routes.forEach((r,i)=>{
if(r.children){
// path+= r.path;
this.t(r.children, path);
}
});
You can access them within your component like this: this.$route.path.matched, it will give you an array of current matched routes, so lets say you are in /meteorologija/meteorolosko-bdenje/aktuelni-podaci/podaci path, then it will return somethin like this (it will also contain some other info):
[
{ path:'/meteorologija', name:'meteorologija' },
{ path:'/meteorolosko-bdenje', name:'meteorolosko bdenje' },
{ path:'/aktuelni-podaci', name:'aktuelni podaci' },
{ path:'/podaci', name:'Podaci' },
]
So i took a second look at your code and found this, you should not have leading slash in your children paths, so you should change it like this:
{ 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') },
]
},
Did you try with
this.$route.fullPath