Vue实现页面返回停留原位置的多种方案

beforeRouteLeave(to, from, next) {
  let position = document.querySelector("#app").scrollTop; //记录离开页面时的位置
  if (position == null) position = 0;
  this.$store.commit("pageLocation/setPagePostion", position); //离开路由时把位置存起来，
  next();
},

  computed: {
    ...mapState({
      pagePostionNum: (state) => state.pageLocation.pagePostion,
    }),
      },

      mounted() {
      this.isTabRoute();
    },

    methods: {
      isTabRoute() {
        if (this.$route.path === "/ETFZone") {
          document.querySelector("#app").scrollTop = this.pagePostionNum;
        }
      },
    }

beforeRouteLeave(to, from, next) {
  this.rememberScroll = document.querySelector("#app").scrollTop;
  next();
},

  // 缓存组件激活时调用
  activated() {
    document.querySelector("#app").scrollTop = this.rememberScroll;
    console.log(document.querySelector("#app").scrollTop, "距离顶部的距离");
  },

/**
 * @class VshowRouter 模拟路由
 * @from 当前页面路由
 * @to 要跳转的页面路由
 * @method addRouter 添加要跳转的路由
 * @method navigatorRoute 返回最近的路由
 * @method deleteRoute 删除栈顶元素-最近跳转的路由
 * @method clearRoute 清空整个路由栈
 * @method customRoute 自定义路由跳转-返回将要跳转的路径
 */
class VshowRouter {
  constructor() {
    this.route = []
  }

  addRouter(from) {
    this.route.push(from)
  }

  navigatorRoute() {
    if (this.route.length >= 1) {
      const lastRoute = this.route[this.route.length - 1]
      if (lastRoute >= 1) {
        this.deleteRoute()
        return lastRoute
      }
    }
  }

  deleteRoute() {
    if (this.route.length > 0) {
      this.route.pop()
    }
  }

  clearRoute() {
    if (this.route.length > 0) {
      this.route.splice(0)
    }
  }

  customRoute(from, to) {
    this.addRouter(from)
    return to
  }
}

export const vShowRouter = new VshowRouter()

<main>
  <SearchContent
  v-show="searchStep === 'one'"
  @goSearchUser="navUserResource"
  @createOther="createOther"
  :obj="obj"
  @chioceResultTag="chioceResultTag"
    />
    <SearchResult
  :searchStatus="searchStatus"
  @navUser="navJump"
  :ArrayData="ArrayData"
  v-show="searchStep === 'two'"
    />
    <UserBasicInformation
  @goNext="goNextStepTwo"
  :userBasic="userBasic"
  :userExperience="userExperience"
  v-show="searchStep === 'three'"
    />
    </main>

toUrlBan(str) {
  T.fn.action10061({
    url: str,
    tzthiddentitle: "0",
    TITLETYPE: "1",
  });
},