vue3页面跳转返回

从A页面跳转到B页面

import { useRouter } from 'vue-router'

 const router = useRouter()
 router.push({
     path: '/**/B',  //B页面的路由路径
      query: {
          id: row.id
      }
  })

从B页面返回

<template>
	<div class="page-header-container">
        <el-page-header @back="goBack" content="详情" class="custom-page-header" />
    </div>
    //其他需要渲染的部分
    ...
</template>
<script>
import { reactive, ref, toRefs, unref, onMounted, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRoute } from 'vue-router'

export default {
    name: 'B',
    
    setup() {
	    const router = useRoute()
	    const state = reactive({
	    ...
	    })
	    
	  	const goBack = () => {
	       window.history.back();
	    }
    }
	
	 return {
            ...toRefs(state),
            goBack
	}    
  
}


</script>

<style lang="scss">
/* 页面头部容器样式 */
.page-header-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;
    /* 设置高度 */
    background-color: #f5f7fa;
    /* 背景颜色 */
}

/* 自定义 el-page-header 样式 */
.custom-page-header {
    width: 100%;
    max-width: 1200px;
    /* 设置最大宽度 */
    padding: 0 20px;
    /* 左右内边距 */
    border-bottom: 1px solid #ebeef5;
    /* 底部边框 */
}

/* 自定义标题样式 */
.custom-page-header .el-page-header__title {
    font-size: 24px;
    /* 字体大小 */
    color: #cf6e0e;
    /* 字体颜色 */
    font-weight: bold;
    /* 字体粗细 */
}

/* 自定义返回按钮样式 */
.custom-page-header .el-icon-back {
    font-size: 20px;
    /* 图标大小 */
    color: #cf6e0e;
    /* 图标颜色 */
}
</style>