组件子组件中的路由器视图不起作用

Question

我正在尝试在我的路由器文件中使用此结构：

{
  path: '/',
  name: 'Dashboard',
  component: Dashboard,
  children: [
    { path: 'users', name: 'Users', component: Users },
    { path: 'permissions', name: 'Permissions', component: Permissions },
    { path: 'systems', name: 'Systems', component: Systems }
  ]
},

但它不起作用。 url 路径发生变化，但组件没有渲染。

我的 Dashboard 组件模板是这样的：

<template>
<div class="container-fluid" data-ma-theme="green">
  <main class="main">
    <header-layout></header-layout>
    <aside-layout></aside-layout>
    <content-layout></content-layout>
  </main>
</div>
</template>

我的路由器视图在内容组件中是这样的：

<template>
   <section class="content">
    <VuePerfectScrollbar class="scroll-area" v-once :settings="settings">
       <router-view/>
    </VuePerfectScrollbar>
  </section>
</template>

我不知道如何告诉仪表板路径孩子在内容组件中

Answer 1

将<router-view/> 放在组件模板内而不是子标签内。这个<VuePerfectScrollbar/> 将替换为您的组件模板。意味着所有其他内容都将丢失

VuePerfectScrollbar 模板内

<template>
<div>
   Other things
    ..............
    <router-view/>
    .......
    Other things
</div>
</template>