jiace-web/src/views/home/mine.vue

<template>
  <div class="mine_page p0-100">
    <div class="mine_l">
      <router-link :to="item.path" v-for="(item, i) in list" :key="i">
        <div :class="i == index ? 'active' : ''" @click="index = i">
          {{ item.name }}
        </div>
      </router-link>
      <div @click="logout">退出登录</div>
    </div>
    <div class="mine_r">
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      index: 0,
      list: [
        {
          path: '/mine/info',
          name: '基本信息'
        },
        {
          path: '/mine/account',
          name: '账户安全'
        },
        {
          path: '/mine/ollection',
          name: '我的收藏'
        },
        {
          path: '/mine/news',
          name: '消息通知'
        }
      ]
    };
  },
  methods: {
    async logout() {
      this.$confirm('确定退出账号吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
          location.href = '/';
        });
      });
    }
  },
  created() {
    let { path } = this.$route;
    this.index = this.list.findIndex(item => {
      return item.path == path;
    });
  }
};
</script>
<style lang="scss" scoped>
.mine_page {
  display: flex;
  .mine_l {
    width: 310px;
    max-height: 340px;
    background-color: #f8f8f8;
    margin-right: 10px;
    border-radius: 6px;
    padding: 20px 0;
    div {
      cursor: pointer;
      font-size: 20px;
      text-align: center;
      height: 60px;
      line-height: 60px;
    }
    // div:hover {
    //   color: #fff;
    //   font-weight: bold;
    //   background-color: #3394ff;
    // }
    .active {
      color: #fff;
      font-weight: bold;
      background-color: #3394ff;
    }
  }
  .mine_r {
    flex: 1;
    padding: 30px;
    background-color: #f8f8f8;
  }
}
</style>