第三层路由渲染不出来(显示空白)是因为第二层路由缺少 router-view 容器, 添加一个带有 <router-view /> 的 PostIndex.vue 空白页面可解决

src/router/admin.js

@@ -1,5 +1,28 @@
 const Admin = () => import('views/admin/Admin')
-const Dashboard = () => import('views/admin/Dashboard')
+// ********************************************************************************************************************
+// 用户后台主页
+const MyIndex = () => import('views/my/MyIndex')
+const MyProfile = () => import('views/my/MyProfile')
+const MyRecord = () => import('views/my/MyRecord')
+const MyOAuth = () => import('views/my/MyOAuth')
+const MyRcmd = () => import('views/my/MyRcmd')
+const MyMessage = () => import('views/my/MyMessage')
+const MyVip = () => import('views/my/MyVip')
+const MyWallet = () => import('views/my/MyWallet')
+
+// ********************************************************************************************************************
+// 稿件后台主页
+const PostIndex = () => import('views/post/PostIndex')
+const PostAnalysis = () => import('views/post/PostAnalysis')
+const History = () => import('views/post/History')
+const PostAlbum = () => import('views/post/PostAlbum')
+// 稿件后台管理
+const VideoPost = () => import('views/post/VideoPost')
+const VideoPostEdit = () => import('views/post/VideoPostEdit')
+const ImagePost = () => import('views/post/ImagePost')
+const ImagePostEdit = () => import('views/post/ImagePostEdit')
+const ArticlePost = () => import('views/post/ArticlePost')
+const ArticlePostEdit = () => import('components/upload/EditArticle')
 
 export default {
   path: '/background',
@@ -10,14 +33,128 @@ export default {
     {
       path: '',
       name: 'Admin',
-      component: Dashboard,
+      component: PostAnalysis,
       meta: { needAuth: true }
     },
     {
-      path: '/background/file',
-      name: 'DiskFile',
-      component: Admin,
-      meta: { needAuth: true }
+      path: '/background/account',
+      name: 'Account',
+      component: MyIndex,
+      meta: { needAuth: true },
+      children: [
+        {
+          path: '/background/account/profile',
+          name: 'MyProfile',
+          component: MyProfile,
+          meta: { needAuth: true }
+        },
+        {
+          path: '/background/account/record',
+          name: 'MyRecord',
+          component: MyRecord,
+          meta: { needAuth: true }
+        },
+        {
+          path: '/background/account/oauth',
+          name: 'OAuth',
+          component: MyOAuth,
+          meta: { needAuth: true }
+        }
+      ]
+    },
+    {
+      path: '/background/my',
+      name: 'My',
+      component: MyIndex,
+      meta: { needAuth: true },
+      children: [
+        {
+          path: '/background/my/album',
+          name: 'PostAlbum',
+          component: PostAlbum,
+          meta: { needAuth: true }
+        },
+        {
+          path: '/background/my/history',
+          name: 'History',
+          component: History,
+          meta: { needAuth: true }
+        },
+        {
+          path: '/background/my/vip',
+          name: 'MyVip',
+          component: MyVip,
+          meta: { needAuth: true }
+        },
+        {
+          path: '/background/my/wallet',
+          name: 'MyWallet',
+          component: MyWallet,
+          meta: { needAuth: true }
+        },
+        {
+          path: '/background/my/message',
+          name: 'MyMessage',
+          component: MyMessage,
+          meta: { needAuth: true }
+        },
+        {
+          path: '/background/my/rcmd',
+          name: 'Rcmd',
+          component: MyRcmd,
+          meta: { needAuth: true }
+        }
+      ]
+    },
+    {
+      path: '/background/post',
+      name: 'Post',
+      component: PostIndex,
+      meta: { needAuth: true },
+      children: [
+        {
+          path: '/background/post/video',
+          name: 'VideoPost',
+          component: VideoPost,
+          meta: { needAuth: true }
+        },
+        {
+          path: '/background/post/video/edit/:videoId',
+          name: 'VideoPostEdit',
+          component: VideoPostEdit,
+          meta: { needAuth: true }
+        },
+        {
+          path: '/background/post/image',
+          name: 'ImagePost',
+          component: ImagePost,
+          meta: { needAuth: true }
+        },
+        {
+          path: '/background/post/image_edit',
+          name: 'ImagePostEdit',
+          component: ImagePostEdit,
+          meta: { needAuth: true }
+        },
+        {
+          path: '/background/post/image/edit/:imageId',
+          name: 'ImagePostEdit',
+          component: ImagePostEdit,
+          meta: { needAuth: true }
+        },
+        {
+          path: '/background/post/article',
+          name: 'ArticlePost',
+          component: ArticlePost,
+          meta: { needAuth: true }
+        },
+        {
+          path: '/background/post/article/edit/:articleId',
+          name: 'ArticlePostEdit',
+          component: ArticlePostEdit,
+          meta: { needAuth: true }
+        }
+      ]
     }
   ]
 }

src/views/admin/Dashboard.vue

@@ -1,235 +0,0 @@
-<template>
-  <el-row>
-    <el-row class="movie-list">
-      <el-col :md="12" class="movie-list">
-        <el-card>
-          <div slot="header" class="clearfix">
-            <span>饼图</span>
-          </div>
-          <div id="chart2" style="height:400px;" />
-        </el-card>
-      </el-col>
-      <el-col :md="12" class="movie-list">
-        <el-card>
-          <div slot="header" class="clearfix">
-            <span>金字塔图</span>
-          </div>
-          <div id="chart3" style="height:400px;" />
-        </el-card>
-      </el-col>
-    </el-row>
-  </el-row>
-</template>
-
-<script>
-import * as echarts from 'echarts'
-
-export default {
-  name: 'Dashboard',
-  data() {
-    return {
-    }
-  },
-  mounted() {
-    this.initChart2()
-    this.initChart3()
-  },
-  created() {
-  },
-  methods: {
-    initChart2() {
-      var option = {
-        tooltip: {
-          trigger: 'item'
-        },
-        legend: {
-          top: '5%',
-          left: 'center'
-        },
-        series: [
-          {
-            name: 'Access From',
-            type: 'pie',
-            radius: ['40%', '70%'],
-            avoidLabelOverlap: false,
-            padAngle: 5,
-            itemStyle: {
-              borderRadius: 10
-            },
-            label: {
-              show: false,
-              position: 'center'
-            },
-            emphasis: {
-              label: {
-                show: true,
-                fontSize: 40,
-                fontWeight: 'bold'
-              }
-            },
-            labelLine: {
-              show: false
-            },
-            data: [
-              { value: 1048, name: 'Search Engine' },
-              { value: 735, name: 'Direct' },
-              { value: 580, name: 'Email' },
-              { value: 484, name: 'Union Ads' },
-              { value: 300, name: 'Video Ads' }
-            ]
-          }
-        ]
-      }
-
-      const myChart = this.$echarts.init(document.getElementById('chart2'))
-      myChart.setOption(option, true)
-      window.addEventListener('resize', () => {
-        if (myChart) {
-          myChart.resize()
-        }
-      })
-    },
-    initChart3() {
-      var maleData = [
-        14, 4, 10, 66,
-        54, 98, 116, 144,
-        210, 358, 484, 562,
-        706, 671, 566, 345,
-        200, 92, 24, 12,
-        0.0
-      ]
-
-      var femaleData = [
-        0, 0, 0, 15, 19,
-        29, 30, 25, 27, 34,
-        36, 48, 36, 56, 60,
-        48, 36, 12, 8, 0,
-        0.0
-      ]
-
-      var maleTotal = maleData.map(function(x) {
-        return Math.abs(x)
-      }).reduce(function(a, b) {
-        return a + b
-      })
-
-      var femaleTotal = femaleData.map(function(x) {
-        return Math.abs(x)
-      }).reduce(function(a, b) {
-        return a + b
-      })
-
-      var malePercentage = maleData.map(function(x) {
-        return -(x / maleTotal * 100)
-      })
-
-      var femalePercentage = femaleData.map(function(x) {
-        return x / femaleTotal * 100
-      })
-
-      const myChart = this.$echarts.init(document.getElementById('chart3'))
-      var option = {
-        title: {
-          text: '唐朝人口金字塔', // 设置标题文本为“唐朝人口金字塔”
-          left: 'center', // 标题水平居中
-          top: '4%', // 标题距离顶部的距离为4%
-          textStyle: {
-            color: '#333', // 标题字体颜色
-            fontSize: 24, // 标题字体大小
-            fontWeight: 'bold', // 标题字体加粗
-            fontFamily: 'KaiTi, serif' // 标题字体样式，楷体或Serif字体
-          }
-        },
-        tooltip: {
-          trigger: 'axis', // 提示框触发类型为坐标轴
-          axisPointer: {
-            type: 'shadow' // 坐标轴指示器类型为阴影
-          },
-          formatter: function(params) {
-            return params[0].name + '<br/>' +
-              params[0].seriesName + ': ' + Math.abs(maleData[params[0].dataIndex]) + ' (' + Math.abs(params[0].data).toFixed(2) + '%)' + '<br/>' +
-              params[1].seriesName + ': ' + Math.abs(femaleData[params[0].dataIndex]) + ' (' + Math.abs(params[1].data).toFixed(2) + '%)'
-            // 提示框内容格式化函数，params参数包含了鼠标悬停时的数据
-          }
-        },
-        legend: {
-          data: ['男性', '女性'], // 图例数据为“男性”和“女性”
-          align: 'left', // 图例左对齐
-          top: '6%', // 图例距离顶部的距离为6%
-          right: 2 // 图例距离右边的距离为2
-        },
-        xAxis: {
-          type: 'value',
-          axisLabel: {
-            formatter: function(value) {
-              // 自定义X轴标签的格式化函数，返回绝对值百分比
-              return Math.abs(value) + '%'
-            }
-          }
-        },
-        yAxis: {
-          type: 'category',
-          data: [
-            '0-4', '5-9', '10-14', '15-19',
-            '20-24', '25-29', '30-34', '35-39', '40-44',
-            '45-49', '50-54', '55-59', '60-64', '65-69',
-            '70-74', '75-79', '80-84', '85-89', '90-94',
-            '95-99', '100 + '
-          ]
-        },
-        series: [
-          {
-            name: '男性', // 数据系列的名称
-            type: 'bar', // 系列类型为条形图
-            stack: 'total', // 数据堆叠，同一个堆叠组的数据会堆叠显示
-            itemStyle: {
-              // 条形图的颜色渐变设置
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: '#3d8e86' },
-                { offset: 0.5, color: '#5da39d' },
-                { offset: 1, color: '#88bfb8' }
-              ])
-            },
-            emphasis: {
-              focus: 'series' // 强调设置
-            },
-            data: malePercentage // 男性数据百分比
-          },
-          {
-            name: '女性', // 数据系列的名称
-            type: 'bar', // 系列类型为条形图
-            stack: 'total', // 数据堆叠
-            emphasis: {
-              focus: 'series' // 强调设置
-            },
-            itemStyle: {
-              // 条形图的颜色渐变设置
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: '#d2a36c' },
-                { offset: 0.5, color: '#d5c8a0' },
-                { offset: 1, color: '#dfd6b8' }
-              ])
-            },
-            data: femalePercentage // 女性数据百分比
-          }
-        ]
-      }
-
-      myChart.setOption(option, true)
-      window.addEventListener('resize', () => {
-        if (myChart) {
-          myChart.resize()
-        }
-      })
-    }
-  }
-}
-</script>
-
-<style scoped>
-.movie-list {
-  padding-bottom: 3px;
-  padding-left: 3px;
-  padding-right: 3px;
-}
-</style>

src/views/admin/LeftAside.vue

@@ -1,48 +1,99 @@
 <template>
   <el-menu
     :default-active="this.$route.path"
+    router
     class="el-menu-vertical-demo"
     background-color="#334157"
     text-color="#fff"
     active-text-color="#ffd04b"
+    :unique-opened="true"
     :collapse="collapsed"
     :collapse-transition="collapseTransition"
   >
     <div class="logobox">
-      <img class="logoimg" src="@/assets/img/icon/logo.png" alt="">
+      <a href="/background" style="text-decoration-line: none">
+        <img class="logoimg" src="@/assets/img/icon/logo.png" alt="">
+      </a>
     </div>
-    <el-menu-item index="/background">
-      <i class="el-icon-menu" />
-      <span slot="title">Dashboard</span>
-    </el-menu-item>
-    <el-submenu index="/background/2">
+    <el-submenu index="/background/account">
       <template slot="title">
-        <i class="el-icon-location" />
-        <span>导航一</span>
+        <i class="el-icon-user" />
+        <span>帐号</span>
       </template>
       <el-menu-item-group>
-        <template slot="title">分组一</template>
-        <el-menu-item index="/background/2-1">选项1</el-menu-item>
-        <el-menu-item index="/background/2-2">选项2</el-menu-item>
+        <el-menu-item index="/background/account/profile">
+          <i class="el-icon-user" />
+          <span slot="title">个人资料</span>
+        </el-menu-item>
+        <el-menu-item index="/background/account/record">
+          <i class="el-icon-message" />
+          <span slot="title">登录历史</span>
+        </el-menu-item>
+        <el-menu-item index="/background/account/oauth">
+          <i class="el-icon-film" />
+          <span slot="title">OAuth</span>
+        </el-menu-item>
       </el-menu-item-group>
-      <el-menu-item-group title="分组2">
-        <el-menu-item index="/background/2-3">选项3</el-menu-item>
+    </el-submenu>
+    <el-submenu index="/background/my">
+      <template slot="title">
+        <i class="el-icon-s-data" />
+        <span>我的</span>
+      </template>
+      <el-menu-item-group>
+        <el-menu-item index="/background/my/album">
+          <i class="el-icon-collection" />
+          <span slot="title">播放列表</span>
+        </el-menu-item>
+        <el-menu-item index="/background/my/history">
+          <i class="el-icon-s-data" />
+          <span slot="title">历史记录</span>
+        </el-menu-item>
+        <el-menu-item index="/background/my/message">
+          <i class="el-icon-message" />
+          <span slot="title">我的消息</span>
+        </el-menu-item>
+        <el-menu-item index="/background/my/vip">
+          <i class="el-icon-film" />
+          <span slot="title">我的会员</span>
+        </el-menu-item>
+        <el-menu-item index="/background/my/wallet">
+          <i class="el-icon-wallet" />
+          <span slot="title">我的钱包</span>
+        </el-menu-item>
+        <el-menu-item index="/background/my/rcmd">
+          <i class="el-icon-film" />
+          <span slot="title">我的推荐</span>
+        </el-menu-item>
+      </el-menu-item-group>
+    </el-submenu>
+    <el-submenu index="/background/post">
+      <template slot="title">
+        <i class="el-icon-film" />
+        <span>稿件</span>
+      </template>
+      <el-menu-item-group>
+        <el-menu-item index="/background/post/video">
+          <i class="el-icon-film" />
+          <span slot="title">视频稿件</span>
+        </el-menu-item>
+        <el-menu-item index="/background/post/image">
+          <i class="el-icon-picture" />
+          <span slot="title">图片稿件</span>
+        </el-menu-item>
+        <el-menu-item index="/background/post/article">
+          <i class="el-icon-picture" />
+          <span slot="title">文章稿件</span>
+        </el-menu-item>
       </el-menu-item-group>
-      <el-submenu index="/background/2-4">
-        <template slot="title">选项4</template>
-        <el-menu-item index="/background/2-4-1">选项1</el-menu-item>
-      </el-submenu>
     </el-submenu>
-    <el-menu-item index="/background/3" disabled>
-      <i class="el-icon-document" />
-      <span slot="title">导航三</span>
-    </el-menu-item>
     <el-menu-item index="/background/4">
       <i class="el-icon-setting" />
       <span slot="title">导航四</span>
     </el-menu-item>
   </el-menu>
 </template>
+
 <script>
 export default {
   name: 'LeftAside',

src/views/my/MyIndex.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <router-view />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MyIndex',
+  data() {
+    return {
+    }
+  },
+  created() {
+  }
+}
+</script>
+
+<style>
+</style>

src/views/post/PostIndex.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <router-view />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PostIndex',
+  data() {
+    return {
+    }
+  },
+  created() {
+  }
+}
+</script>
+
+<style>
+</style>