CODEWITHSUNDEEP
vuejs2vue-router
Victor Oliveira
Victor Oliveira

Reputation: 1129

Router link not calling router view on nested routes

I have a router

routes: [
  {
    path: '/',
    name: 'home',
    meta : {
      label : 'Home'
    },
    component: Home
  },
  {
    path: '/usuarios',
    name: 'usuarios',
    meta : {
      label : 'Usuarios'
    },
    component: Users,
    children :  [
      {
        path: '/listar',
        meta : {
          label : 'Listar'
        },
        name      : 'listUser',
        component: Wrapper,
      },
      {
        path: '/cadastrar',
        meta : {
          label : 'Cadastrar !'
        },
        name      : 'userCreate',
        component: UserCreate
      },
    ],

  },

]

And I have a template for rendering this router at my navbar

<div class="main">

  <ul class="menu-list">
    <li v-for="item in menus" v-on:click="toggleActive(item)">
      <router-link class="font-gray" :to="item.path" :exact="true">{{item.meta.label}}</router-link>
      <ul class="menu-list" v-if="item.children && item.isActive">
        <li v-for="child in item.children">
          <router-link class="font-gray" :to="{path : item.path+child.path}" :exact="true" :append="true" >{{child.meta.label}}</router-link>
        </li>
      </ul>
    </li>
  </ul>
</div>

When I click on the first router-link, the view is rendered with no problem at the router view. But when I click on the router link of childrens, it does not work,

Anyone have any idea why?

Upvotes: 1

Views: 1798

Answers (2)

Victor Oliveira
Victor Oliveira

Reputation: 1129

I finally figured it out.

If you have children, the father component should have a <router-view> as well

Found the answer here: Vue router2 not catching deep nested routes

Thanks everybody for trying help

Upvotes: 2

thanksd
thanksd

Reputation: 55674

This issue is happening because you have forward slashes / prepended to the paths of your nested routes.

From the documentation on nested routes:

Note that nested paths that start with / will be treated as a root path. This allows you to leverage the component nesting without having to use a nested URL.

This means that, even though your "listar" route is a child of your "usuarios" route, the path is /listar, not /usuarios/listar.

You should remove the forward slashes from the paths of your nested routes, and then specify the path in your template like so:

:to="{ path : item.path + '/' + child.path }"

Upvotes: 0

Related Questions