vue.js - 路由器 View 中的路由器 View

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

像下面这样更新你的路由文件，这样父模块就可以在它们各自的路由器 socket 中加载它的子模块。

地点<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,         
        }       
      ],
},