Implement navigateToParentRoute() utility / composable ...

[michealroberts]

Hey @posva 👋

I was wondering if it were possible to present the following idea I have had around navigating specifically back to the parent view, from a nested view. Essentially, I often use something like this:

export const navigateToParent = async (router: Router, route: RouteLocationNormalizedLoaded) => {
  const matchedRoutes = route.matched

  if (matchedRoutes.length <= 1) {
    console.warn('No matched routes found.')
    // If there are no matched routes, or we are in the root route, then do nothing:
    return
  }
  // The parent route is the second last in the matched array:
  const parentRoute = matchedRoutes[matchedRoutes.length - 2] || {
    path: '/'
  }

  // Navigate to the parent route with the path as the fallback:
  return await router.push(parentRoute.name ? { name: parentRoute.name } : parentRoute.path)
}

To find the matches for the current route, and if we have found more than 2 matches, then we are in a child route, and we can route back.

I was wondering what your thoughts were on the robustness of this approach, and if this could either be include in vue-router as a utility or if it should live somewhere else ...

Many thanks 💚