this.$router.go(-1) （ VUE3写法 ：proxy.$router.go(-1) ）返回上一页最简单实用，现通过路由传参及keepAlive，实现返回保留滚动条位置

router.js

注:需要保留滚动条的页设置keepAlive: true

import { createRouter, createWebHashHistory } from 'vue-router'
const routes = [
  {
    path: '/',
    name: 'index',
    component: () => import('@/views/index.vue'),
  }, {
    path: '/rule',
    name: 'rule',
    component: () => import('@/views/rule.vue'),
  },{
    path: '/list',
    name: 'list',
    component: () => import('@/views/list.vue'),
    meta: {
      keepAlive: true // 需要缓存
    }
  }, {
    path: '/about/:orderid',
    name: 'about',
    component: () => import('@/views/about.vue')
  }, {
    path: '/rank',
    name: 'rank',
    component: () => import('@/views/rank.vue'),
    meta: {
      keepAlive: true // 需要缓存
    }
  }
]

//history模式对应createWebHistory()方法
//hash模式对应createWebHashHistory()方法
const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

App.vue

<template>
<div id="app">


<router-view v-slot="{ Component, route }">
<keep-alive>
<component :is="Component" :key="route.name" v-if="route.meta.keepAlive"/>
</keep-alive>
<component :is="Component" :key="route.name" v-if="!route.meta.keepAlive"/>
</router-view>


</div>
</template>
<script setup>
import {defineComponent,getCurrentInstance,ref,reactive,computed,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted,onErrorCaptured,onRenderTracked,onRenderTriggered,onActivated,onDeactivated,onServerPrefetch} from 'vue';
//生命周期
onBeforeMount(()=>{
  console.log('注册一个钩子，在组件被挂载之前被调用。onBeforeMount')
})
onMounted(()=>{
  console.log('注册一个回调函数，在组件挂载完成后执行。onMounted')
})
onBeforeUpdate(()=>{
  console.log('注册一个钩子，在组件即将因为响应式状态变更而更新其 DOM 树之前调用。onBeforeUpdate')
})
onUpdated(()=>{
  console.log('注册一个回调函数，在组件因为响应式状态变更而更新其 DOM 树之后调用。onUpdated')
})
onBeforeUnmount(()=>{
  console.log('注册一个钩子，在组件实例被卸载之前调用。onBeforeUnmount')
})
onUnmounted(()=>{
  console.log('注册一个回调函数，在组件实例被卸载之后调用。onUnmounted')
})
onErrorCaptured(() => {
  console.log('注册一个钩子，在捕获了后代组件传递的错误时调用。onErrorCaptured')
})
onRenderTracked(() => {
  console.log('注册一个调试钩子，当组件渲染过程中追踪到响应式依赖时调用。onRenderTracked')
})
onRenderTriggered(() => {
  console.log('注册一个调试钩子，当响应式依赖的变更触发了组件渲染时调用。onRenderTriggered')
})
onActivated(() => {
  console.log('注册一个回调函数，若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。onActivated')
})
onDeactivated(() => {
  console.log('注册一个回调函数，若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。onDeactivated')
})
onServerPrefetch(() => {
  console.log('注册一个异步函数，在组件实例在服务器上被渲染之前调用。onServerPrefetch')
})
</script>
<style scoped>
</style>

需保存滚动条位置页.vue

注意这两个onActivated 和 onDeactivated 这两个生命周期钩子函数，

需要import {onActivated,onDeactivated} from 'vue'

<template>
<div id="millia">

<!--其他HTML代码-->

<!--侧边导航非组件-->
<ul>
<li @click="goTop">TOP</li>
<li @click="goOtherPage">去其他页</li>
</ul>


<!--引用返回组件用于返回上一层-->
<go-back :goBackData="goBackData"></go-back>

<!--其他HTML代码-->

</div>
</template>
<script setup>
import {defineComponent,getCurrentInstance,ref,reactive,computed,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted,onErrorCaptured,onRenderTracked,onRenderTriggered,onActivated,onDeactivated,onServerPrefetch} from 'vue';

import GoBack from '@/components/GoBack.vue'

//使用vue的getCurrentInstance 方法获取当前组件实例
const { proxy } = getCurrentInstance()


//goBack组件数据 传空值用于返回上一页 proxy.$router.go(-1)
let goBackData = reactive({
 goBackName:"",
 goBackScroll:"",
})


//当前滚动条位置
let scroll = ref()
const handleScroll = () =>  {
 scroll.value = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
 //console.log(scroll.value)
}


//窗口绑定监听方法
window.addEventListener('scroll',handleScroll)


//返回顶部
const goTop = () => {
 document.getElementById('app').scrollIntoView({
  behavior: "smooth",
  block: "start",
  inline: "nearest"
 });
}


//去其他页同时传递页面滚动条位置
const goOtherPage = (event) => {
 proxy.$router.push({
  name:"其他页名字",
  params:{
   goBackName: "当前需要保存滚动条页名字 如 list",
   goBackScroll: scroll.value
  }
 })
}


//判断路由参数goBackScroll决定滚动条位置
const isGoScroll = () => {
 if (proxy.$route.params.goBackScroll) {
  //console.log(proxy.$route.params.goBackScroll)
  document.documentElement.scrollTop = proxy.$route.params.goBackScroll
  document.body.scrollTop = proxy.$route.params.goBackScroll
 }
}


//若 <KeepAlive>，当组件被插入到 DOM 中时调用。onActivated'
onActivated(() => {
 window.addEventListener('scroll',handleScroll);
 isGoScroll();
})


//若 <KeepAlive>，当组件从 DOM 中被移除时调用。onDeactivated'
onDeactivated(() => {
 window.removeEventListener('scroll', handleScroll);
})
</script>

返回组件使用页.vue

<template>
<div id="millia">

<!--其他HTML代码-->

<go-top></go-top>
<go-back :goBackData="goBackData"></go-back>

<!--其他HTML代码-->

</div>
</template>
<script setup>
import { defineComponent, getCurrentInstance, ref, reactive, computed, onMounted } from 'vue';
import GoBack from '@/components/GoBack.vue';  //回顶部组件
import GoTop from '@/components/GoTop.vue'; //返回组件

//使用vue的getCurrentInstance 方法获取当前组件实例
const { proxy } = getCurrentInstance()


//goBack组件数据
let goBackData = reactive({
 goBackName:"",
 goBackScroll:"",
})


//获取路由参数
const getRouter = () => {
 if(proxy.$route.params.goBackName && proxy.$route.params.goBackScroll){
  goBackData.goBackName = proxy.$route.params.goBackName
  goBackData.goBackScroll = proxy.$route.params.goBackScroll
 }
}


onMounted(() => {
 getRouter();
})
</script>
<style scoped>
</style>

GoBack返回组件

<template>
<div class="goBack" @click="goBack">
返回
</div>
</template>
<script setup>
import {getCurrentInstance,defineProps,defineEmits,defineExpose,ref,reactive} from 'vue';
defineProps({
 goBackData: Object,
 //goBackName及goBackScroll
 //goBackName 返回路径名
 //goBackScroll 滚动量
})
//使用vue的getCurrentInstance 方法获取当前组件实例
const { proxy } = getCurrentInstance();
console.log(proxy.goBackData.goBackName)
//根据参数判断返回
const goBack = () => {
 //console.log(proxy.goBackData.goBackName)
 if(proxy.goBackData.goBackName == '' || proxy.goBackData == undefined){
  proxy.$router.go(-1)
 }else{
  proxy.$router.push({
   name:proxy.goBackData.goBackName,
   params:{
    goBackScroll:proxy.goBackData.goBackScroll
   }
  })
 }
}
</script>
<style scoped>
.goBack{position:fixed;right:0;bottom:0;display:flex;justify-content:center;align-items:center;z-index:8;background:#3398fb;color:#fff;font-size:1.4rem;padding:1rem 0;border-radius:0.5rem 0 0 0.5rem;writing-mode:vertical-rl;width:3rem;}
.goBack .icon{height:3rem;width:3rem;}
</style>

GoTop回顶部组件

<template>
<div class="goTop" @click="goTop">
TOP
</div>

</template>
<script setup>
const goTop = () => {
 document.getElementById('app').scrollIntoView({
  behavior: "smooth",
  block: "start",
  inline: "nearest"
 });
}
</script>
<style scoped>
.goTop{position:fixed;right:0;bottom:5.5rem;display:flex;justify-content:center;align-items:center;z-index:8;background:#ff58d9;color:#fff;font-size:1.4rem;padding:1rem 0;border-radius:0.5rem 0 0 0.5rem;writing-mode:vertical-rl;width:3rem;}
.goTop .icon{width:3rem;}
</style>