时间戳

首页 > 解决方案 > 路由器视图中的路由器视图

vue.js - 路由器视图中的路由器视图

问题描述

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

{
  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.jsvue-router

解决方案

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

放置<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,         
        }       
      ],
},

推荐阅读