[Vuejs]-Reuse existing tab in VueJS for routing to child and grandchild routes with Vue Router

by

0👍

✅

I think you have a pretty straight forward issue – you are nesting twice.

Option 1

You’d need another <router-view/> inside the child component to be able to see the grandchild with the current route configuration (and then hide the child content with v-show or something like that)

Option 2

Alternatively you could change the way you structure the child and grandchild routes, don’t nest them:

{
  name: "parent",
  path: "/parent/:parentId(\\d+)",
  props: function(route) {
  let parentId = null;
  if (route.constructor === Array) {
        parentId = route[0].params.parentId;
  } else {
        parentId = route.params.parentId;
  }

  return {
        parentId: Number(parentId)
  };
},
  component: Parent,
  children: [
   {
    name: "child",
    path: "child",
    component: Child, 
   },
   {
    name: "grandchild",
    path: "child/grandchild/:grandchildId(\\d+)",
    props: function(route) {
    return { grandchildId: Number(route.params.grandchildId) };
     },
    component: GrandChild
   }
 
}

either way, the router link would be:

:to="{name:'grandchild', params:{grandchildId:'134551}}"

or

:to="'child/grandchild/${'123431')'"

Leave a comment