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

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/> 将替换为您的组件 template.Means 所有其他内容都将丢失

内部 VuePerfectScrollbar 模板

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

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

Router View in a child of a component doesn't work

vue.js

vue-router