vue 后台管理侧边栏三层路由配置

router/index.js 文件

{path: "/store",component: Layout,meta: { title: "知识库管理", icon: "list"},children: [{path: "article",name: "article",meta: { title: "文章管理", icon: "list"},component: () => import("@/views/article/index"),children: [{path: "list",name: "articleList",component: () => import("@/views/article/list/list"),meta: { title: "文章列表", icon: "list"},},{path: "add",name: "addArticle",component: () => import("@/views/article/add/add"),meta: { title: "新增文章", icon: "list"},}]}]},

上面侧边栏路由下有children ，children下面还有children ,这样直接配置页面不会显示页面内容

index.vue 代码如下：

<template><el-alert :closable="false"><router-view /></el-alert>
</template>
<style lang="scss" scoped>
.el-alert--info.is-light {background: #fff;
}
</style>

这样配置后，其余页面都可正常显示，嵌套路由。