Question

我正在为我的 Vue 应用构建一个仪表板，我有一个关于如何处理仪表板路由的问题。

我的仪表板容器组件具有以下结构：

<template>
  <div>
    <side-nav />
    <div>
      <router-view />
    </div>
  </div>
</template>

目标是在保持导航和其他内容静态的同时呈现不同的组件。

我的路线中有以下结构：

{
    path: "/dashboard",
    name: "Dashboard",
    component: Dashboard,
    children: [
      {
        path: "/dashboard/home",
        component: AccountHome,
        alias: "/dashboard"
      },
      {
        path: "/dashboard/settings",
        component: Settings
      }
    ]
  }

我想知道将默认组件设置为在仪表板内部呈现的正确方法是什么。现在我希望用户身份验证时登录页面的 URL 为 /dashboard 并呈现 AccountHome 组件。上述路线使用别名工作，但似乎不是解决问题的正确方法。

如果我没有别名，则 router-view 中没有组件，所以我最终只呈现静态仪表板组件。

有什么不同的方法可以处理这个问题吗？还是处理仪表板路由的标准？

Answer 1

通常，您的页眉、页脚和其他固定布局元素会放在布局文件中或直接作为 Vue 组件放在 App.vue 中。布局将包围您的动态视图并使用路由器视图槽来实现这一点。

这样的事情很典型：

    <template>
      <TheHeader/>
      <ErrorMessage/>
      
      <router-view v-slot="{ Component }">
        <transition>
          <component :is="Component"></component>
        </transition>
      </router-view>

      <TheFooter />
    </template>

您似乎选择呈现一个空的 Dashboard 组件并希望其第一个子组件显示 Dashboard 内容。这是一个很好的方法，添加一个 DashboardHome 组件并像这样将其连接到路由器中，以便在将 /dashboard 作为您的根路由的同时显示它：

  children: [
    // DashboardHome will be rendered inside Dashboard's <router-view>
    { path: '', component: DashboardHome }
]

我的大多数仪表板视图都没有使用子项，因为我认为在我的 URL 中不需要 /dashboard/*，它在语义上不像 /settings/organization/ 或 /user/ 那样有趣new 等。这意味着我的仪表板路由位于 router.js 的最外层，因此每个项目都是 /dashboard 的兄弟，而不是子项。

我确实将子路由用于更简单/更小的内容位，例如 /signup/success。这里我用 v-if 而不是单独的模板向孩子们展示，就像这样：

    <div class="container" v-if="signupStatus.signedUp && !signupStatus.signingUp">
      <router-view></router-view>
    </div>

如果您想在 URL 中保留 /dashboard 并使用适当的模板嵌套路由视图，则可以在仪表板路由级别下嵌套任意数量的新路由器视图或路由器视图插槽（嵌套尽可能深）希望）。此处示例：https://jsfiddle.net/yyx990803/L7hscd8h/

路由仪表板组件的正确方法是什么？

1 个答案: