掉接口实现是自己的还是其他用户及tap切换

• 显示别人的空间

• 地址栏中如果有userId，侧显示对用户的数据

• 如果没有userId，则默认显示自己的信息(Vuex)

• 如果菜谱中，点击自己，也是有userId传递的

• 通过判断是否为自己，如果是，不需要后端拿，登录时，个人信息已经存在了vuex中

• 关注后，需要新的数据里，还有粉丝，所以整体赋值

• 监听路由变化，来判断路由是否有信息，从而分辨是否为自己的空间

用axios进行二次封装，那利用了就调用他的借口来拿取数据，这里总共用了六个接口，来实现效果第一个获取数据，以及点击关注添加一个关注

.space
  h2
    text-align center
    margin 20px 0
  .user-info
    height 210px
    background-color #fff
    display flex
    .user-avatar
      width 210px
      height 210px
      
      img 
        width 100%
        height 100% 
    .user-main
      width 570px
      padding 20px
      position relative
      h1
        font-size 24px
        color #333
        line-height 44px
      .info  
        font-size 12px
        line-height 22px
        color #999
        a
          color #999
      .tools 
        position absolute
        right 20px
        top 20px
        vertical-align top;
        a
          display inline-block
          padding 3px 0
          width 50px
          color #fff
          text-align center
        a.follow-at
          background-color  #ff3232
        a.no-follow-at 
          background-color #999
          
    .user-more-info
      width 190px
      overflow hidden
      padding-top 20px
      li
        width 81px
        height 81px
        border-radius 32px
        border-bottom-right-radius 0
        margin 0px 8px 8px 0px
        float left
        div
          display block
          height 81px
          width 81px
          box-shadow 0px 0px 6px rgba(0,0,0,0.05) inset
          border-radius 32px
          border-bottom-right-radius 0

          span 
            color #999
            line-height 20px
            display block
            padding-left 14px
            padding-top 14px

          strong 
            display block
            font-size 18px
            color #ff3232
            font-family Microsoft Yahei
            padding-left 14px
            line-height 32px

  .user-nav
    margin 20px 0 20px 0
  .user-info-show
    min-height 300px
    background #fff
    padding-top 20px
    .info-empty
      width 100% 
      min-height inherit
      display flex
      align-items center
      justify-content:center;
      p 
        text-align center
        font-size 12px
      a 
        text-align center
        display block
        height 48px
        width 200px
        line-height 48px
        font-size 14px
        background #ff3232
        color #fff
        font-weight bold
        margin 0px auto
  .el-tabs__item.is-active 
    color: #ff3232;
  .el-tabs__active-bar
    background-color: #ff3232;
  .el-tabs__nav-wrap::after
    background-color: transparent;

然后通过路由来实现tap切换，methods实现tap切换

 tabClickHandler(){
      console.log(this.activeName);
      //问题：在Tab切换时，会发生key值重复的问题，在每次tab切换之前，先去清空数据
      this.list=[];
      // 问题：给后端传递的参数配覆盖(query中的)
      this.$router.push({
        name:this.activeName,
        query:{
          ...this.$route.query
        }
      })
    },

然后查看粉丝数量及关注的人我们先封装他们的接口，然后用异步调用封装的请求，然后再给组件赋值，methods实现代码如下：

const getOtherInfo = {
  async works(params){//作品
    let data=(await getMenus(params)).data;
    data.flag='works'
    return data
  },
   async following(params){//关注
    let data=(await following(params)).data;
    data.flag='following'
    return data
  },
   async fans(params){//粉丝
    let data=(await fans(params)).data;
    data.flag='fans'
    return data
  },
   async collection(params){//收藏
    let data=(await collection(params)).data;
    data.flag='collection'
    return data
  }
} 

async getInfo(){
      let data=await getOtherInfo[this.activeName]({userId:this.userInfo.userId})
      // 给组件赋值
      // console.log(data);
      if(this.activeName===data.flag){
         this.list=data.list
      }
    }

在Tab切换时，会发生key值重复的问题，在每次tab切换之前，先去清空数据

给后端传递的参数配会被覆盖(query中的)