Vue router get full path based on nested route-CodePudding

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);
          }
       });

CodePudding user response：

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' },
]

CodePudding user response：

Did you try with

this.$route.fullPath