路由器视图中的路由器视图答案

【问题标题】：A router view in a router view路由器视图中的路由器视图
【发布时间】：2020-01-21 07:30:36
【问题描述】：

我有一个带有身份验证系统和后端仪表板的应用程序。默认情况下，路由显示身份验证组件：

{
  path: "/",
  name: "Authentication",
  component: Auth
},

App.view 包含登录后，我被重定向到另一个 vue 组件“home”：

{
  path: "/dashboard",
  name: "home",
  component: Home,
},

到目前为止，一切都很好。在这个主组件中，我有一些带有菜单的 HTML，我想在同一页面中显示组件。

这是来自主页模板的 html 示例

<div>
  <router-link :to="'/dashboard/user'">User</router-link>
  <router-link :to="'/dashboard/stats'">Stats</router-link>

  <app-user></app-user>
  <app-stats></app-stats>
</div>

我还在路由器中为这些组件创建了路由，但是在单击链接时会显示一个白页。我刚开始使用 vue.js，我确信这是一个易于管理的东西。我的目标是根据显示的页面显示组件。

【问题讨论】：

标签： vue.js vue-router

【解决方案1】：

如下所示更新您的路由文件，以便父模块可以将其子模块加载到各自的路由器插座中。

将<router-view></router-view> 放置在您的仪表板组件中，以便加载其子项。如果您访问/dashboard/user，那么 UserCompoent 将在仪表板组件的<router-view></router-view> 中进行渲染。

{
  path: "/dashboard",
  name: "home",
  component: Home,
     children: [
        {
          path: 'user',
          component: UserComponent,         
        },
         {
          path: 'state',
          component: StateComponent,         
        }       
      ],
},

【讨论】：