vue.js - 组件子项中的路由器 View 不起作用

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>

我的路由器 View 在内容组件中是这样的:

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

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

Answer 1

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

内部VuePerfectScrollbar模板

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