merge

 <template>
   <LayoutApp :show-back="false" :hideHeader="hideHeader" :no-safe-area="true">
     <ClientOnly>
-      <waterFallList
+      <waterFallList ref="waterFallList" v-if="articleList && articleList.length > 0"
         :listData="articleList"
         :listInfo="listInfo"
         :item-w="344" :gutter-w="18"
@@ -9,6 +9,10 @@
         @load-more="loadMore"
       >
       </waterFallList>
+
+      <div class="no-data-container" v-else>
+        <ufo-no-item :tip="`暂无数据`"></ufo-no-item>
+      </div>
     </ClientOnly>
 
   </LayoutApp>
@@ -18,12 +22,14 @@
 import LayoutApp from '../../components/layout/layout-app';
 import {createNamespacedHelpers} from 'vuex';
 import waterFallList from './components/waterfall';
+import UfoNoItem from '../../components/ufo-no-item';
 
 const {mapActions, mapState} = createNamespacedHelpers('article/articleList');
 
 export default {
   name: 'articleList',
   components: {
+    UfoNoItem,
     LayoutApp,
     waterFallList
   },
@@ -31,6 +37,7 @@ export default {
   data() {
     return {
       listData: [],
+      needLoadingData: false
     };
   },
   mounted() {
@@ -43,7 +50,7 @@ export default {
     ...mapState(['articleList', 'articleListInfo', 'isFetchingArticleList']),
     listInfo() { // 列表基础信息
       if (this.articleListInfo) {
-        console.log(this.articleListInfo);
+        console.log('computed=', this.articleListInfo, 'computedList=', this.articleList);
         return {
           lastedTime: this.articleListInfo.lastedTime,
           pageNo: this.articleListInfo.pageNo || 1,
@@ -54,16 +61,36 @@ export default {
       }
     }
   },
-  asyncData({store}) {
-    return store.dispatch('article/articleList/fetchArticleList', {
-      page: 1,
-      limit: 20
+  beforeRouteEnter(to, from, next) {
+    next(vm => {
+      // 判断页面来源，决定是否重新读取数据
+      if (!to.name || from.name !== 'ArticleDetail') {
+        vm.$store.dispatch('article/articleList/fetchArticleList', {
+          page: 1,
+          limit: 20,
+          reload: true
+        });
+      }
+
+      /*if (to.name === 'List') {
+        // 让页面滚回跳出时的位置
+        setTimeout(function() {
+          vm.$refs.wrapper.scrollTop = vm.scrollTop;
+          console.log(vm.$refs.wrapper.scrollTop);
+        }, 200);
+      }*/
     });
   },
+  beforeRouteLeave(to, from, next) {
+    if (this.$refs.waterFallList) {
+      console.log(this.$refs.waterFallList)
+    }
+    this.$refs.waterFallList.routeLeave(to, from, next);
+  },
   methods: {
     ...mapActions(['fetchArticleList']),
     loadMore() {
-      if (this.articleListInfo.pageNo < this.articleListInfo.totalPage && !this.isFetchingArticleList) {
+      if (this.listInfo.pageNo < this.listInfo.totalPage && !this.isFetchingArticleList) {
         console.log('loadMore');
         this.fetchArticleList({
           page: this.articleListInfo.pageNo + 1,
@@ -78,5 +105,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-
+  .no-data-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    background-color: #efefef;
+  }
 </style>

@@ -78,7 +78,7 @@ export default {
   computed: {
     ...mapState(['yoho']),
     articleList() {
-      console.log(this.listData);
+      console.log('listData=', this.listData);
       return this.listData;
     },
     itemWidth() {
@@ -150,6 +150,11 @@ export default {
       this.updateArticlePraise({articleId, status, index}).then(result => {
         console.log(result);
       });
+    },
+
+    routeLeave(to, from, next) {
+      console.log('RouteLeave:', 'to=', to, 'from=', from);
+      next();
     }
   }
 };

@@ -8,7 +8,7 @@ export default {
    * @param limit
    * @returns {Promise<void>}
    */
-  async fetchArticleList({commit}, {page = 1, limit = 20, lastedTime = null}) {
+  async fetchArticleList({commit}, {page = 1, limit = 20, reload = false, lastedTime = null}) {
     commit(Types.FETCH_ARTICLE_LIST_REQUEST);
     let result = await this.$api.get('/api/grass/article/list', {
       page,
@@ -40,7 +40,7 @@ export default {
         item.imageNewHeight = imageHeight;
       });
 
-      commit(Types.FETCH_ARTICLE_LIST_SUCCESS, result);
+      commit(Types.FETCH_ARTICLE_LIST_SUCCESS, {result, reload});
     } else {
       commit(Types.FETCH_ARTICLE_LIST_FAILED);
     }

@@ -12,8 +12,14 @@ export default {
   },
 
   // 调用成功
-  [Types.FETCH_ARTICLE_LIST_SUCCESS](state, result) {
+  [Types.FETCH_ARTICLE_LIST_SUCCESS](state, {result, reload}) {
+    console.log('reload');
     state.isFetchingArticleList = false;
+    if (reload) {
+      state.articleList = [];
+      state.articleListInfo = {};
+    }
+
     if (state.articleList.length === 0) {
       state.articleList = result.data.list;
     } else {