How to find parent route info of the current route within a component

user_16547166 0
Viewed 75

I need to detect parent route /products from inside of the FeaturedProducts.vue component. Which has a route path of /product-list/featured

const routes = [
  {
    path: "/",
    name: "Home",
    component: () => import('./Home.vue')   
  }, 
  {
    path: "/product-list",
    name: "Products",
    component: () => import('./Products.vue'),      
    children: [
      {
        path: '/featured',
        name: "FeaturedProducts",
        component: import('./FeaturedProducts.vue')           
      }
    ]
  }];

How can I find the parent route programmatically in a component?

vuejs3 vue.js javascript
1 Answers

You can get all routes using router.getRoutes() and iterate to check if child routes matches your current route.

 setup() { 
   const router = useRouter();

   function findParentRoute() {
     let found = null;
     router.getRoutes().forEach((r) => {
       (r.children || []).forEach((ch) => {
         if (r.path + "/" + ch.path == route.path) {
           found = r;
         }
       });
     });
     return found;
   }
 }

BEWARE

This solution works only if full-paths are matched. If paths have parameters you can use route.name instead of route.path

user_25729670
Related