解决vue列表页跳转到详情页，返回列表页时不刷新、保持原来的状态的方法

在Vue中，解决列表页跳转到详情页再返回不刷新的问题，可以使用vue-router的导航守卫结合vuex进行状态管理。

1. 使用vuex存储列表页的状态。
2. 在导航守卫中检查详情页返回时的路由，如果是从详情页返回，则不刷新列表页，而是使用vuex中的状态。

以下是简化的代码示例：

首先，安装并设置vuex：

npm install vuex --save

在store.js中创建状态管理：

import Vue from 'vue';
import Vuex from 'vuex';
 
Vue.use(Vuex);
 
export default new Vuex.Store({
  state: {
    listState: null, // 存储列表状态
  },
  mutations: {
    setListState(state, listState) {
      state.listState = listState;
    }
  }
});

在路由导航守卫中处理：

import router from './router';
import store from './store';
 
router.beforeEach((to, from, next) => {
  if (to.name === 'listPage') {
    if (from.name === 'detailPage') {
      // 从详情页返回到列表页时，使用vuex中的状态
      store.commit('setListState', store.state.listState);
      next(false);
    } else {
      // 正常加载列表页
      store.commit('setListState', null);
      next();
    }
  } else {
    next();
  }
});

在列表页组件中，你需要根据vuex中的状态初始化列表：

export default {
  name: 'ListPage',
  data() {
    return {
      list: []
    };
  },
  created() {
    if (this.$store.state.listState) {
      // 使用vuex中保存的状态
      this.list = this.$store.state.listState;
    } else {
      // 正常加载列表数据
      this.fetchListData();
    }
  },
  methods: {
    fetchListData() {
      // 获取列表数据的方法
    }
  },
  beforeRouteEnter(to, from, next) {
    if (from.name === 'detailPage') {
      // 防止重复加载数据
      next(vm => {
        vm.list = vm.$store.state.listState;
      });
    } else {
      next();
    }
  },
  beforeRouteLeave(to, from, next) {
    if (to.name !== 'detailPage') {
      // 离开列表页时保存状态
      this.$store.commit('setListState', this.list);
    }
    next();
  }
};

详情页组件不变，正常跳转即可。这样，当你从列表页进入详情页后，再返回列表页时，列表页不会刷新，而是保持原来的状态。