首页面可以正常显示

但是有报错 有同学遇到这样的问题吗

好像是页面什么方法没有被销毁吧 我觉得

不知道哪里出了问题、找不到哪里错了

以下是首页代码

<template>
  <div id="index-page-box" class="index-page-box clear-fix">
    <div id="index-left-part" class="index-left-part float-left">
      <div class="index-left-user-info float-left">
        <div class="user-avatar">
          <img class="user-avatar-img" :src="userInfo.avatar">
        </div>
        <div class="user-name">
          <span v-text="userInfo.userName"></span>
        </div>
        <div class="user-sign">
          <span v-text="userInfo.sign"></span>
        </div>
      </div>
      <div class="left-user-self-links">
        <el-popover
          popper-class="popper-img"
          placement="bottom"
          width="150"
          close-delay="0"
          trigger="click">
          <img class="WeiImg" src="/portal/image/1601276149611_760152796371615744.jpeg">
          <span class="W" slot="reference"><i class="iconfont iconweixin"></i></span>
        </el-popover>
        <el-popover
          popper-class="popper-img"
          placement="bottom"
          width="150"
          close-delay="0"
          trigger="click">
          <img class="WeiImg" src="/portal/image/1601276179964_760152923681325056.jpeg">
          <span class="Q" slot="reference"><i class="iconfont iconQQ"></i></span>
        </el-popover>
      </div>
    </div>
    <div id="index-center-part" class="index-center-part float-left">
      <div class="loop-list-box">
        <el-carousel :interval="1500" type="card" height="200px">
          <el-carousel-item v-for="(item,index) in loops" :key="index">
            <img class="loop-image" :src="item.imageUrl">
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="index-article-box-category-title" id="index-article-box-category-title">
        <span>「 {{this.category_title}} 」</span>
      </div>
      <div class="articleIsNullText" v-show="this.categoryIsNull === 1">
        <img class="index-article-center-content-IsNull-img"
             src="http://s1.hdslb.com/bfs/static/jinkela/search/asserts/no-data.png">
      </div>
      <div class="index-article-result-content">
        <div class="index-article-result-content-item" v-for="(item,index) in this.articles" :key="index">
          <div class="index-article-result-content-item1 float-left">
            <a :href="'/article/'+item.id" target="_blank">
              <div class="article-item1-title">{{item.title}}</div>
            </a>
            <div class="article-item1-summary">{{item.summary}}</div>
            <div class="article-item1-label-box clear-fix">
              <div class="article-item1-label " v-for="(item,index) in item.labels"
                   :key="index">
                <el-tag class="tag-item-index float-left" type="" effect="plain">{{item}}</el-tag>
              </div>
            </div>
            <div class="article-item1-info">
              <span class="article-item1-info-time"><i
                class="iconfont iconrili"></i> {{formatDate(item.createTime)}}</span>
              <span class="article-item1-info-viewCount"><i class="iconfont iconliulan"></i> {{item.viewCount}}</span>
            </div>
          </div>
          <div class="index-article-result-content-item2 float-right">
            <a :href="'/article/'+item.id" target="_blank"><img :src="item.cover" class="item2-img"></a>
          </div>
        </div>
      </div>
      <div class="article-page-action-bar">
        <el-pagination
          background
          layout="prev, pager, next"
          @current-change="onPageChange"
          :page-size="pageNavigation.pageSize"
          :current-page="pageNavigation.currentPage"
          :total="pageNavigation.totalCount">
        </el-pagination>
      </div>
    </div>
    <div id="index-right-part" class="index-right-part float-left">
      <div class="like-article-item-title1">
        置顶文章
      </div>
      <div class="article-top-list-box">
        <div class="article-top-item1" v-for="(item,index) in this.articleTop" :key="index">
          <a :href="'/article/'+item.id">
            <span v-text="item.title" class="article-top-article-title"></span>
          </a>
        </div>
      </div>
    </div>
    <div id="index-right-two-part" class="index-right-two-part float-right">
      <div class="category-item-title">
        分类目录
      </div>
      <div class="category-item1">
        <span @click="AllArticleByCategory()">全部分类</span>
      </div>
      <div class="category-item1" v-for="(item,index) in categories" :key="index">
        <span v-text="item.name" @click="ArticleListByCategoryId(item)"></span>
      </div>
    </div>
    <div id="index-right-search-part" class="index-right-search-part float-left">
      <span>
        <el-input class="search-input"
                  prefix-icon="iconfont iconsousuo"
                  v-model="keyword"
                  placeholder="搜索你想要的东西吧!"
                  @keyup.enter.native="search_article"
                  v-loading="loading">
        </el-input>
      </span>
    </div>
  </div>
</template>

<script>
  import * as api from '../api/api';
  import * as dateUtils from "../utils/date";

  export default {
    data() {
      return {
        category_title: '最近文章',
        categoryIsNull: 0,
        category_id: '',
        loading: false,
        keyword: '',
        url: '',
        pageNavigation: {
          pageSize: 10,
          currentPage: 1,
          totalCount: '',
        }
      }
    },
    mounted() {
      this.onWindowScroll();
      window.addEventListener('scroll', this.onWindowScroll);
      let that = this;
      window.onresize = function () {
        that.onWindowScroll();
      }
    },
    beforeDestroy() {
      window.removeEventListener('scroll', this.onWindowScroll);
    },
    methods: {
      formatDate(dateStr) {
        let date = new Date(dateStr);
        return dateUtils.formatDate(date, 'yyyy-MM-dd')
      },
      search_article() {
        if (this.keyword.trim() === '') {
          return;
        }
        //this.loading = true;
        //location.href = '/search/' + encodeURIComponent(this.keyword);
        window.open('/search/' + encodeURIComponent(this.keyword))
      },
      showWarning(msg) {
        this.$message({
          message: msg,
          type: 'warning',
          center: true,
        })
      },
      showSuccess(msg) {
        this.$message({
          message: msg,
          type: 'success',
          center: true,
        })
      },
      AllArticleByCategory() {
        // console.log(item);
        this.category_title = '全部文章';
        this.category_id = '';
        let topHeader = document.getElementById('index-article-box-category-title');
        if (topHeader) {
          topHeader.scrollIntoView({
            block: 'start',
            behavior: 'smooth'
          })
        }
        api.GetArticleList(this.category_id, this.pageNavigation.currentPage, this.pageNavigation.pageSize).then(result => {
          if (result.code === api.success_code) {
            this.articles = result.data.content;
            //设置数据为空的文字坑
            this.pageNavigation.currentPage = 1;
            if (result.data.totalElements === 0) {
              this.categoryIsNull = 1;
            } else {
              this.categoryIsNull = 0;
            }
            this.pageNavigation.currentPage = result.data.number;
            this.pageNavigation.pageSize = result.data.size;
            this.pageNavigation.totalCount = result.data.totalElements;
          } else {
            this.showWarning('数据加载失败');
          }
        })
        this.pageNavigation.currentPage = 1;
      },
      ArticleListByCategoryId(item) {
        // console.log(item);
        this.category_title = item.name;
        this.category_id = item.id;
        let topHeader = document.getElementById('index-article-box-category-title');
        if (topHeader) {
          topHeader.scrollIntoView({
            block: 'start',
            behavior: 'smooth'
          })
        }
        api.GetArticleList(this.category_id, this.pageNavigation.currentPage, this.pageNavigation.pageSize).then(result => {
          if (result.code === api.success_code) {
            this.articles = result.data.content;
            //设置数据为空的文字坑
            this.pageNavigation.currentPage = 1;
            if (result.data.totalElements === 0) {
              this.categoryIsNull = 1;
            } else {
              this.categoryIsNull = 0;
            }
            this.pageNavigation.currentPage = result.data.number;
            this.pageNavigation.pageSize = result.data.size;
            this.pageNavigation.totalCount = result.data.totalElements;
          } else {
            this.showWarning('数据加载失败');
          }
        })
        this.pageNavigation.currentPage = 1;
      },
      onWindowScroll() {
        let scrollTop = document.documentElement.scrollTop;
        let scrollLeft = document.documentElement.scrollLeft;
        let centerPart = document.getElementById('index-center-part');
        let leftPart = document.getElementById('index-left-part');
        let parentPart = document.getElementById('index-page-box');
        let rightPart = document.getElementById('index-right-two-part');
        let rightTwoPart = document.getElementById('index-right-part');
        let rightSearchPart = document.getElementById('index-right-search-part');
        if (centerPart && leftPart && parentPart && rightPart && rightTwoPart) {
          //处理上下滑动
          let baseTop = centerPart.offsetTop + rightPart.offsetHeight;
          if (scrollTop <= baseTop) {
            leftPart.style.top = '90px';
            rightTwoPart.style.top = (baseTop + 10 - scrollTop) + 'px';
            rightSearchPart.style.top = leftPart.offsetHeight + 110 + 'px';
          } else {
            leftPart.style.top = '90px';
            rightTwoPart.style.top = '10px';
            rightSearchPart.style.top = leftPart.offsetHeight + 110 + 'px';
          }
          //处理左右滑动
          if (scrollLeft > 0) {
            leftPart.style.left = -scrollLeft + 'px';
            rightPart.style.left = -scrollLeft + 'px';
            rightTwoPart.style.left = -scrollLeft + 'px';
            rightSearchPart.style.left = -scrollLeft + 'px';
          } else {
            leftPart.style.left = parentPart.offsetLeft + 'px';
            rightPart.style.left = parentPart.offsetLeft + 'px';
            rightTwoPart.style.left = parentPart.offsetLeft + 'px';
            rightSearchPart.style.left = parentPart.offsetLeft + 'px';
          }
        }
        // console.log('on scroll ' + scrollTop);
      },
      onPageChange(page) {
        //去加载分页内容
        api.GetArticleList(this.category_id, page, this.pageNavigation.pageSize).then(result => {
          if (result.code === api.success_code) {
            this.articles = result.data.content;
            let topheader = document.getElementById('blog-box');
            if (topheader) {
              topheader.scrollIntoView({
                block: 'start',
                behavior: 'smooth'
              })
            }
          } else {
            this.$message.error(result.message);
          }
        })
      }
    },
    async asyncData({params}) {
      let userInfo = await api.GetAdminInfo();
      let categoriesResult = await api.GetArticleCategoryList();
      let loopsResult = await api.GetLoopImageList();
      let articlesResult = await api.GetArticleList('', 1, 20);
      let articleTopResult = await api.GetTopArticleList();
      let webViewCount = await api.GetWebViewCount();
      let pageNavigationResult = {
        currentPage: articlesResult.data.number,
        pageSize: articlesResult.data.size,
        totalCount: articlesResult.data.totalElements
      }
      console.log(articlesResult.data);
      return {
        pageNavigation: pageNavigationResult,
        articleTop: articleTopResult.data,
        articles: articlesResult.data.content,
        loops: loopsResult.data,
        categories: categoriesResult.data,
        userInfo: userInfo.data,
      }
    }
  }
</script>


<style>

  .articleIsNullText {
    background: #fff;
    margin-top: 15px;
    border-radius: 16px;
    height: 450px;
    text-align: center;
  }

  .index-article-center-content-IsNull-img {
    width: 300px;
    margin-top: 100px;
  }

  .index-article-box-category-title span {
    color: #595468;
    font-weight: 500;
    font-size: 18px;
  }

  .index-article-box-category-title {
    text-align: center;
    background: #fff;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 8px;
    margin-top: 15px;
  }

  .article-item1-label-box {
    padding-top: 10px;
    -webkit-line-clamp: 1;
    text-overflow: '...';
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    overflow: hidden;
  }

  .article-item1-info {
    padding-top: 10px;
    padding-left: 15px;
  }

  .article-item1-info-viewCount {
    font-weight: 300;
    font-size: 16px;
    margin-left: 25px;
  }

  .article-item1-info-time {
    font-weight: 300;
    font-size: 16px;
  }

  .article-item1-label .el-tag {
    height: 22px;
    line-height: 18px;
  }

  .tag-item-index {
    margin-right: 10px;
  }

  .article-item1-label {
    padding-left: 15px;
  }

  .article-item1-summary {
    font-size: 16px;
    margin: 0 15px;
    height: 60px;
    color: #909399;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }

  .article-item1-title:hover{
    color: #437ddf;
  }

  .article-item1-title {
    font-size: 22px;
    margin: 15px 15px 5px 15px;
    font-weight: 400;
    color: #353535;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }

  .index-article-result-content-item1 {
    width: 575px;
  }

  .index-article-result-content-item2 {
    width: 175px;
    padding: 5px 0px 5px 0px;
  }

  .item2-img {
    width: 170px;
    height: 170px;
    object-fit: cover;
    border-radius: 8px;
  }

  .index-article-result-content {
    margin-top: 15px;
    margin-bottom: 35px;
  }

  .index-article-result-content-item {
    background: #fff;
    border-radius: 8px;
    height: 180px;
    margin-top: 25px;
  }

  .article-label-tag .el-tag {
    height: 22px;
    line-height: 18px;
  }

  .WeiImg {
    margin-top: 5px;
    width: 150px;
    height: 150px;
  }

  .el-input__prefix {
    left: 30px;
  }

  .el-input__inner {
    border: none;
  }

  .search-input {
    margin-top: 5px;
  }

  .el-input--prefix .el-input__inner {
    padding-left: 55px;
  }

  .index-right-part .el-divider {
    background: #f3f3f3;
  }

  .index-right-two-part .el-divider{
    background: #f3f3f3;
  }

  .index-right-part .el-divider--horizontal{
    margin: 0px 0;
  }

  .index-right-two-part .el-divider--horizontal{
    margin: 0px 0;
  }

  #index-right-part {
    position: fixed;
    top: 90px;
  }

  #index-left-part {
    position: fixed;
    top: 90px;
  }

  .article-page-action-bar {
    background: #fff;
    border-radius: 8px;
    padding-top: 10px;
    text-align: center;
    padding-bottom: 10px;
  }

  .article-top-item1 span:hover {
    color: #858585;
  }

  .article-top-list-box {
    padding-top: 0px;
    padding-bottom: 15px;
  }

  .article-top-item1 span {
    color: #1b1b1b;
  }

  .article-top-item1 {
    cursor: pointer;
    margin-top: 10px;
    padding: 4px 20px 3px 25px;
    font-size: 14px;
    font-weight: 400;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }

  .like-article-item-title1 {
    padding-top: 15px;
    padding-left: 25px;
    margin-bottom: 20px;
    font-size: 16px;
    color: #888888;
    font-weight: 400;
  }

  .category-item-title {
    padding-bottom: 10px;
    padding-left: 25px;
    font-size: 16px;
    color: #888888;
    font-weight: 400;
  }

  .loop-list-box {
    border-radius: 8px;
    padding: 15px 10px 0px 10px;
    background: #fff;
  }

  .loop-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
  }

  .index-right-two-part .category-item1:hover {
    width: 180px;
    margin-left: 25px;
  }

  .index-right-two-part .category-item1 {
    padding-top: 3px;
    padding-bottom: 3px;
    margin-left: 25px;
  }

  .category-item1{
    margin-top: 10px;
  }

  .category-item1 span {
    cursor: pointer;
    font-size: 14px;
    color: #3f3f3f;
  }

  .category-item1 span:hover {
    color: #a0a0a0;
  }

  .index-right-two-part {
    padding-top: 15px;
    padding-bottom: 15px;
    width: 230px;
    background: #fff;
    border-radius: 8px;
  }

  .index-right-search-part {
    width: 230px;
    height: 50px;
    background: #fff;
    border-radius: 8px;
  }

  .left-user-self-links .iconfont {
    font-size: 35px;
  }

  .left-user-self-links .Q:hover {
    color: #00a0e3;
  }

  .left-user-self-links .W:hover {
    color: rgba(21, 211, 120, 0.96);
  }

  .left-user-self-links {
    text-align: center;
    cursor: pointer;
    padding-bottom: 25px;
  }

  .index-left-user-info {
    padding-top: 15px;
  }

  .user-sign {
    width: 220px;
    padding-top: 20px;
    padding-bottom: 25px;
    padding-left: 2px;
    text-align: center;
    margin: 4px;
    font-size: 16px;
    color: #828282;
    font-weight: 400;
  }

  .user-name {
    font-weight: 500;
    font-size: 18px;
    color: #525252;
    text-align: center;
    margin-top: 10px;
  }

  .user-avatar {
    text-align: center;
  }

  .user-avatar-img {
    object-fit: cover;
    width: 140px;
    height: 140px;
    border-radius: 50%;
  }

  .index-page-box {
    padding-top: 20px;
  }

  .index-right-search-part {
    position: fixed;
  }


  .index-right-part{
    margin-left: 1000px;
    border-radius: 8px;
  }

  .index-left-part {
    border-radius: 8px;
  }

  .index-left-part, .index-right-part, .index-right-search-part {
    width: 230px;
    background: #fff;
  }

  .index-center-part {
    width: 750px;
    /*background: #f2f2fa;*/
    margin-left: 240px;
    border-radius: 16px;
    margin-right: 2px;
  }


</style>