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

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

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

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

有没有其他方法可以处理这个问题？还是处理仪表板路由的标准？

Answer 1

通常，您的页眉、页脚和其他固定布局元素会放在布局文件中或直接放在 App.vue 中作为 Vue components。该布局将包含您的动态视图并使用 router-view 插槽来实现此目的。

像这样的事情很典型：

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

      <TheFooter />
    </template>

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

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

我的大部分仪表板视图都没有使用 children，因为我在 URLs 中看不到 /dashboard/* 的必要性，它在语义上不像它那样有趣将用于 /settings/organization/ 或 /user/new 等。这意味着我的仪表板路由位于 router.js 的最外层级别，因此每个项目都是 /dashboard 的兄弟而不是 child.

我确实为 simpler/smaller 内容位使用 child 路由，例如 /signup/success。这里我展示了 children 和 v-if 而不是单独的模板，像这样：

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

如果您想在 URL 中保留 /dashboard 并使用适当的模板嵌套路线视图，您可以根据需要嵌套任意数量的新 router-view 或 router-view 插槽在您的仪表板路线级别以下（嵌套深度随您所愿）。此处示例：https://jsfiddle.net/yyx990803/L7hscd8h/

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

What is the proper way to route dashboard components?

javascript

vue.js

vue-router

vuejs2