python_93040206/ClientPlatform/src 2/pages/admin/admin.vue

<template>
  <div class="page">
    <el-menu class="menu-box" :default-active="active" @select="select">
      <el-menu-item index="info">
        <i class="el-icon-document"></i>
        <span slot="title">个人用户信息管理</span>
      </el-menu-item>
      <el-menu-item index="blog">
        <i class="el-icon-document"></i>
        <span slot="title">撰写博客</span>
      </el-menu-item>
      <el-menu-item index="blogs">
        <i class="el-icon-document"></i>
        <span slot="title">个人博客管理</span>
      </el-menu-item>
      <el-menu-item index="tags">
        <i class="el-icon-document"></i>
        <span slot="title">标签管理</span>
      </el-menu-item>
      <el-menu-item index="comments">
        <i class="el-icon-document"></i>
        <span slot="title">评论管理</span>
      </el-menu-item>
    </el-menu>
    <div class="sub-page-box">
      <router-view :userInfo="userInfo"></router-view>
    </div>
  </div>
</template>
<script>
export default {
  name: "admin",
  data() {
    return {
      active: "info",
      userInfo: {},
    };
  },
  watch: {
    $route(to, from) {},
  },
  created() {
    let userInfo = localStorage.getItem("userInfo");
    if (userInfo) {
      if (typeof userInfo === "string") {
        userInfo = JSON.parse(userInfo);
      }
      this.userInfo = userInfo;
    }
  },
  mounted() {
    this.$nextTick(() => {
      console.log(this.$route);
      this.active = this.$route.name;
    });
  },
  methods: {
    select(name) {
      if (this.$route.name !== name) {
        this.$router.push({
          name: name,
        });
      }
    },
  },
};
</script>
<style lang="less" scoped>
.page {
  //margin-left: 0;
  //width: 100vw;
  background-color: #f8f9fb;
  margin-top: 350px;
  display: flex;
  .menu-box {
    text-align: left;
    width: 250px;
  }
  .sub-page-box {
    flex: 1;
    height: calc(100vh - 65px);
    overflow-y: scroll;
  }
}
</style>