Vue router2 没有捕捉到深层嵌套的路由

本文介绍了Vue router2 没有捕捉到深层嵌套的路由的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

限时送ChatGPT账号..

我的路由结构如下，分为几个文件:

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

这篇关于Vue router2 没有捕捉到深层嵌套的路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！