vue.js - Vue router2无法捕获深层嵌套路由

我的路线具有以下结构，分为几个文件:

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},
        ]
    }
]

我正在努力赶上

/user/account/addresses

但是对于帐户下的任何内容，我都可以使用AccountMain组件，而不是我期望的组件。如果我将地址部分从帐户路由中删除，并将其移动为说用户名/地址，则它可以工作。但我无法达到AccountMain下。 AccountMain下的任何其他组件都相同

如果我尝试达到帐户/下不存在的任何内容，例如:

/user/account/blah

它返回该 View 的空白页。

但是，添加

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

到AccountMain的路由定义会输出一个额外的预期名称

user_main
user_account
user_addresses

因此，它找到了名称，但返回了父级(AccountMain)而不是其子级组件Addresses。这与AccountMain组件无关，因为如果我从如下的路由定义中删除AccountMain组件，我仍然无法到达地址并获得空白页。

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

        ]
    }
]

我正在使用vue路由器2.1.1。

我在这里做错什么事？

最佳答案

每个 parent 都必须返回它自己的路由器 View ，我遇到了同样的问题，并且做了如下修复:

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,
                }
              ]
            }
          ]
        }
      ]
    }
  ]
});

因此，在每个父路径中，您都必须添加以下内容:

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

并在其中添加path: ""的新路线

我希望它能帮助大家解决此类问题