Question

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

{
  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，我敢肯定这是一件容易管理的事情。我的目标是根据显示的页面显示组件。

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

路由器视图中的路由器视图

1 个答案: