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路径更改但组件未呈现。

我的仪表板组件模板如下：

<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>

我不知道如何告诉Dashboard路径孩子们在内容组件中

Answer 1

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

内部VuePerfectScrollbar模板

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

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

1 个答案: