vue router 嵌套子路由点击没有反应
Main.vue:
<template>
<el-container style="height: 100vh;">
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu router :default-openeds="['1', '3']">
<el-sub-menu index="1">
<template #title>
<el-icon><message /></el-icon>管理 One
</template>
<el-menu-item-group>
<template #title>分类 1</template>
<el-menu-item index="/categories/create">新建分类1</el-menu-item>
</el-menu-item-group>
</el-sub-menu>
</el-menu>
</el-aside>
<el-container>
<el-header style="text-align: right; font-size: 12px">
<el-dropdown>
<el-icon style="margin-right: 15px"><setting /></el-icon>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>View</el-dropdown-item>
<el-dropdown-item>Add</el-dropdown-item>
<el-dropdown-item>Delete</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<span>Tom</span>
</el-header>
<el-main>
<router-view name="tbl"></router-view>
</el-main>
</el-container>
</el-container>
</template>
<script>
import { defineComponent, } from 'vue'
import { Message, Setting } from '@element-plus/icons'
export default defineComponent({
components: {
Message,
Setting,
},
setup() {
return {
}
},
})
</script>
<style>
.el-header {
background-color: #b3c0d1;
color: var(--el-text-color-primary);
line-height: 60px;
}
.el-aside {
color: var(--el-text-color-primary);
}
</style>
路由index.js
import {createRouter, createWebHistory} from 'vue-router'
import Main from '../views/Main.vue'
import CategoryEdit from '../views/CategoryEdit.vue'
const history = createWebHistory();
const router =createRouter({
history,
routes:[
{
path:'/',
name:'main',
component:Main,
children:[
{
path:'/categories/create',
components:{
tbl:CategoryEdit
}
},
]
},
]
})
export default router;
CategoryEdit.vue:
<template>
<div class="about">
<h1>1111111111111111</h1>
</div>
</template>
显示页面如下:
点左边链接,右边没有显示