Vue 详情页返回列表页保持原位置

方法1：对于按钮分页

通过数据缓存，保持当前页面数据

sessionStorage.page = ''	// 当前页数
sessionStorage.pageSize = ''	// 每页数量

完整代码如下：

 // 使用混入文件
 # paginations.js
 /* 列表页进入详情页，返回时绑定对应页面 */
export default {
  beforeRouteEnter(to, from, next) {
    //在路由加载进入之间，如果不是从当前详情页返回进入列表页的话，则将缓存中的page和pageSize清除
    const toFullPath = to.fullPath.split('/')
    const fromFullPath = from.fullPath.split('/')
    // 列表与详情的路由要对应
    // ['', 'articles'], ['', 'articles', 'info?...']
    if (toFullPath[1] !== fromFullPath[1]) {
      sessionStorage.page = '';
      sessionStorage.pageSize = '';
    }
    next();
  },
  watch: {
    pageData: {
      handler(value) {
        sessionStorage.page = value.page;
        sessionStorage.pageSize = value.pageSize;
      },
      deep: true,
    },
  },
  created() {
    this.pageData.page = +sessionStorage.page || 1;
    this.pageData.pageSize = +sessionStorage.pageSize || 5;
  },
};

# 页面使用 article.vue, info.vue
# article.vue, 对应路由 /#/articles
<script>
	// mix:1. 引入mixins
	import paginationMix from '@/mixins/pagination'
	
	export default {
		mixins: [paginationMix],
		data () {
			pageData: {
				page: 1,
				pageSize: 5
			}
		},
	}
</script>

方法2：对于加载式分页

使用页面缓存机制

1. 路由设置

# router/index.js
{
  path: '/articles',
  name: 'ArticleIndex',
  component: ArticleIndex,
  meta: {
    auth: true,
    // 此处增加属性
    keepAlive: true,
    // 此处增加属性END
  }
}

2. App.vue 设置缓存组件区域

# App.vue
<div id="app>
	<keep-alive>
      <!-- 里面是当需要缓存时   显示组件的 router-view-->
      <router-view v-if="$route.meta.keepAlive" ></router-view>
    </keep-alive>
    <!-- 外面是不需要缓存时 -->
    <router-view v-if="!$route.meta.keepAlive" ></router-view>
</div>

3. 列表页无需设置

# Article.vue 
<template>
  <div class="article">
    <h3>文章列表</h3>
    <div id="articles">
      <div class="article-lists" v-for="(item, index) in lists" :key="index">
        {{ item.id }}：【{{ item.category }}】
        <span>
          <router-link :to="{path: '/articles/info', query: {id: item.id, pid: index}}">{{ item.title }}</router-link>
        </span>
        <span class="under-line"> {{ item.is_hot==1 ? '热门' : '' }} </span>
        <span class="under-line"> {{ item.is_recommend==1 ? '推荐' : '' }} </span>
      </div>
    </div>
    <div class="load-more mr-bottom" v-if="pageData.page < totalPages" @click='loadMore'>点击加载更多</div>
    <div class="load-more mr-bottom" v-else>没有更多了</div>
  </div>
</template>

<script>
  import {
    getArticles
  } from '@/httpConfig/article.js'
  export default {
    name: 'ArticleIndex',
    data() {
      return {
        lists: [],
        pageData: {
          page: 1,
          limit: 5
        },
        listsNum: 0, // 总条数
        totalPages: 0
      }
    },
    created() {
      this.setArticles()
    },
    methods: {
      setArticles() {
        getArticles(this.pageData).then(res => {
          if (res.status) {
            this.lists = this.lists.concat(res.data.lists)
            this.totalPages = res.data.pages
            this.listsNum = res.data.total
          }
        }).catch(err => {});
      },
      loadMore() {
        this.pageData.page += 1
        this.setArticles()
      }
    }
  }
</script>

<style scoped>
  a, a:link {
    text-decoration: none !important;
    color: #333333;
  }

  .red {
    color: var(--AidColor2);
  }

  .article-lists {
    text-align: left;
    padding: 10px;
    margin: 100px 0;
  }

  .article-title-box {
    width: 150px;
    border-right: 1px solid var(--TextColor3);
  }

  .article-title {
    display: block;
    margin-bottom: 10px;
  }

  .article-cont {
    width: 600px;
    background: var(--TextColor2);
  }
</style>