Question

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

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

它返回该视图的空白页面。

但是，添加

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

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

user_main
user_account
user_addresses

因此它找到了名称，但返回了父（AccountMain）而不是它的子组件地址。这与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 router 2.1.1。

我在这里做错了什么？

Answer 1

此处的路由器视图是顶级插座。它使组件与顶级路由匹配。类似地，呈现的组件也可以包含其自己的嵌套路由器视图。更多，Nested 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>
    ` 
}

Answer 2

每个父母都必须返回它自己的路由器视图，我遇到了同样的问题，并且确实按照以下说明进行了修复：

SELECT type, username, DATE_FORMAT(time_value, '%d-%m-%Y %H:%i:%s') AS 'time_value'
FROM (
    SELECT 'attendence' AS 'type', `user` AS 'username', STR_TO_DATE(in_time, , '%d-%m-%Y') AS 'time_value'
    FROM attendence 
    UNION ALL
    SELECT 'visit', username, STR_TO_DATE(visit_time_in, '%d-%m-%Y')
    FROM visits
) t 
WHERE t.username = 'MCCuser0036'
    AND time_value BETWEEN STR_TO_DATE('01-04-2019', '%d-%m-%Y') AND STR_TO_DATE('27-04-2019', '%d-%m-%Y')
ORDER BY type, time_value DESC

因此，在每个父级路由中都必须添加以下内容：

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"); } }

的新路线

我希望它会帮助您解决此类问题

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

2 个答案: