Vue router2 没有捕获深层嵌套路由

2022-01-25 00:00:00 vue.js vue-router vue-component

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

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

我正在努力追赶

/user/account/addresses

但是对于 account/下的任何内容，我得到的是 AccountMain 组件，而不是我期望的组件.如果我将地址组件从帐户路由中取出并将其移动到说用户/地址它可以工作.但我无法在 AccountMain 下访问.AccountMain 下的任何其他组件都是一样的

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

如果我尝试访问 account/下不存在的任何内容，例如:

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

/user/account/blah

它为该视图返回空白页面.

it returns empty page for that view.

但是，添加

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

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

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

user_main
user_account
user_addresses

所以它会找到名称，但返回父组件 (AccountMain) 而不是它的子组件地址.这与 AccountMain 组件无关，因为如果我从路由定义中删除 AccountMain 组件，如下所示，我仍然无法到达地址并获得一个空白页面.

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

        ]
    }
]

我正在使用 vue 路由器 2.1.1.

I'm using vue router 2.1.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");
   }
}

并在它的子节点中添加一个带有 path: ""

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

希望对大家遇到此类问题有所帮助

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

相关文章