组件子项中的路由器视图不起作用 [英] Router View in a child of a component doesn't work
问题描述
我正在尝试在我的路由器文件中使用这个结构:
<代码>{小路: '/'，name: '仪表板',组件:仪表板，孩子们: [{路径:'用户'，名称:'用户'，组件:用户}，{路径:'权限'，名称:'权限'，组件:权限}，{ 路径:'系统'，名称:'系统'，组件:系统}]},但它不起作用.url 路径更改，但组件未呈现.
我的仪表盘组件模板是这样的:
<div class="container-fluid" data-ma-theme="green"><main class="main"><header-layout></header-layout><aside-layout></aside-layout><内容布局></内容布局></main></模板>
我的路由器视图位于内容组件中，如下所示:
<section class="内容"><VuePerfectScrollbar class="scroll-area" v-once :settings="settings"><路由器视图/></VuePerfectScrollbar></节></模板>我不知道如何告诉仪表板路径孩子在内容组件中
将 <VuePerfectScrollbar/> 将替换为您的组件模板.意味着所有其他东西都将丢失
内VuePerfectScrollbar模板
<div>其他事情………………<路由器视图/>......其他事情</模板>
I'm trying to use this structure in my router file:
{
path: '/',
name: 'Dashboard',
component: Dashboard,
children: [
{ path: 'users', name: 'Users', component: Users },
{ path: 'permissions', name: 'Permissions', component: Permissions },
{ path: 'systems', name: 'Systems', component: Systems }
]
},
But it doesn't work. The url path change but the components are not rendered.
My Dashboard component template is like this:
<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>
And my router view are in the content component like this:
<template>
<section class="content">
<VuePerfectScrollbar class="scroll-area" v-once :settings="settings">
<router-view/>
</VuePerfectScrollbar>
</section>
</template>
i don't know how to tell the Dashboard path that the childs are in the content component
Put <router-view/> inside component template not inside child tag. This <VuePerfectScrollbar/> is going to replace with your component template.Means all other things will be lost
Inside VuePerfectScrollbar template
<template>
<div>
Other things
..............
<router-view/>
.......
Other things
</div>
</template>
这篇关于组件子项中的路由器视图不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
