Vue router2 not catching deep nested routes

Question

My routes has the following structure divided into several files:

export const router = new VueRouter({
    mode: 'hash',
    base: __dirname,
    saveScrollPosition: true,
    history: true,
    routes : Array.concat(userRoutes, siteRoutes)
})

...
// user/routes.js

export const userRoutes = [
    {
        path: '/user',
        name: 'user_main',
        component: UserMain,
        meta: {authRequired: true},
        children: Array.concat([
            ...
            ], accountRoutes)
    }
]


// account/routes.js 

export const accountRoutes = [
    {
        path: 'account',
        name: 'user_account',
        component: AccountMain,
        children: [
            {path: 'edit',  name: 'user_edit_account', component: EditAccount},
            {path: 'addresses',  name: 'user_addresses',  component: Addresses},
        ]
    }
]

and i'm trying to catch

/user/account/addresses

but for anything under account/ i get the AccountMain component, not the component that i expected. If i take the addresses component out of account routes and move it to say user/addresses it works. but i can not reach under AccountMain. It is same for any other component under AccountMain

If i try to reach anything that does not exist under account/ for example:

/user/account/blah 

it returns empty page for that view.

But, adding

beforeEnter: (to, from, next) => {
    to.matched.forEach(m => console.log(m.name)) 
}

to AccountMain's route definition outputs an extra and the expected name

user_main
user_account
user_addresses

So it finds the name, but returns the parent (AccountMain) instead of it's child component Addresses. This is not related to AccountMain component, since if i remove the AccountMain component from route definition such as the following, i still can not reach the addresses and get an empty page.

export const accountRoutes = [
    {
        path: 'account',
        name: 'user_account',
        children: [
            {path: 'edit',  name: 'user_edit_account', component: EditAccount},
            {path: 'addresses',  name: 'user_addresses',  component: Addresses},

        ]
    }
]

I'm using vue router 2.1.1.

What is it that i'm doing wrong here?

Answer 1

Each parent must return it's own router-view , i had the same problem and i did fix it as following :

export default new Router({
  mode: "history",
  scrollBehavior: () => ({ y: 0 }),
  routes: [
    {
      path: "/",
      component: DefaultContainer,
      redirect: "/dashboard",
      children: [
        {
          path: "/administration",
          redirect: "administration/pros",
          name: "Administration",
          component: {
            render(c) {
              return c("router-view");
            }
          },
          children: [
            {
              path: "rules",
              name: "RulesManagement",
              redirect: "rules",
              component: {
                render(c) {
                  return c("router-view");
                }
              },
              children: [
                {
                  path: "",
                  component: RulesManagement
                },
                {
                  path: "edit/:id",
                  name: "Edit Rule",
                  component: EditRule,
                },
                {
                  path: "add/",
                  name: "Add Rule",
                  component: AddRule,
                }
              ]
            } 
          ]
        }
      ]
    }
  ]
});

So in each parent route you have to add this :

component: {
   render(c) {
      return c("router-view");
   }
}

and in it's children add a new route with path: ""

I hope it will help you all for this kind of problems

Answer 2

The router-view here is a top-level outlet. It renders the component matched by a top level route. Similarly, a rendered component can also contain its own, nested router-view. More, Nested Routes.

Each parent component need to have its own router-view for its children routes. jsfiddle

const UserMain = {
  template: `
    <div class="user">
      <h1>User</h1>
      <router-view></router-view> //a rendered component can also contain its own, nested router-view
    </div>
  `
}

const AccountMain = { 
    template: `
        <div>
      <h1>AccountMain</h1>
      <router-view></router-view> //a rendered component can also contain its own, nested router-view
    </div>
    ` 
}