vue3回到上一个路由页面

学习链接

Vue Router获取当前页面由哪个路由跳转
在Vue3的setup中如何使用this

• beforeRouteEnter 在这个路由方法中不能访问到组件实例this，但是可以使用next里面的vm访问到组件实例，并通过vm.$data获取组件实例上的data数据
• getCurrentInstance 是vue3提供的获取组件实例的方法，可通过getCurrentInstance函数获取了当前组件实例对象，并通过instance.data.message和instance.ctx.sayHello访问了组件实例的数据和方法

<template><divclass="main-box"><divclass="title">菜单权限</div><divclass="role-menu-box"v-loading="dataLoading"><divclass="role-menu-header"><el-forminline:model="roleInfo"ref="roleInfoRef":rules="roleInfoRules"label-width="80px"><el-form-itemlabel="角色名称"prop="roleName"><el-inputv-model="roleInfo.roleName"></el-input></el-form-item><el-form-itemlabel="角色标识"prop="roleLabel"><el-inputv-model="roleInfo.roleLabel"></el-input></el-form-item></el-form></div><divclass="role-menu-body"><el-scrollbar><el-tree:props="defaultProps"node-key="id":expand-on-click-node="false"check-on-click-nodedefault-expand-allref="menuTreeRef"show-checkbox:data="roleMenuTreeData"></el-tree></el-scrollbar></div><divclass="role-menu-footer"><el-button@click="goBack">返回</el-button><el-buttontype="primary"@click="saveRoleMenu">保存</el-button></div></div></div></template><script>import msgBoxer from'@/utils/msgBoxer'exportdefault{// name: 'roleMenu', // 这个组件不应该被缓存下来, 因此需要让 路由名称 与 组件名称不一致data(){return{formerRoute:{},isSaved:false}},// 在进入路由的时候, 记录进入之前的路由beforeRouteEnter(to, from, next){next(vm=>{// 通过 `vm` 访问组件实例let{ query, params, path }= from
            vm.$data.formerRoute ={ query, params, path }// 没有this, 只能通过vm去访问组件实例上的数据})},}</script><scriptsetup>import{ ref, reactive, onMounted, nextTick, getCurrentInstance }from'vue'import{ getRoleMenuByRoleId as getRoleMenuByRoleIdApi, saveRoleMenu as saveRoleMenuApi }from'@/api/roleApi'import{ useRoute, useRouter, onBeforeRouteLeave }from'vue-router'import Messager from'@/utils/messager'// 使用tagsViewStoreimport useTagsView from'@/store/tagsView'const tagsViewStore =useTagsView()const dataLoading =ref(false)// 获取组件实例const instance =getCurrentInstance()// 使用路由const route =useRoute()const router =useRouter()const defaultProps ={label:'title',children:'children'}// 角色信息let roleInfo =ref({})// 菜单树refconst menuTreeRef =ref(null)// 菜单树数据let roleMenuTreeData =ref([])const roleInfoRules ={roleName:[{required:true,message:'角色名称不能为空',trigger:'blur'}],roleLabel:[{required:true,message:'角色标识不能为空',trigger:'blur'}]}functiongetRoleMenuByRoleId(){
    console.log(route);getRoleMenuByRoleIdApi(route.params.roleId).then(({ roleId, roleName, roleLabel, menuIdList, roleMenuTreeDTOList })=>{
        roleInfo.value ={ roleId, roleName, roleLabel, menuIdList }
        roleMenuTreeData.value = roleMenuTreeDTOList
        // window.menuTreeRef = menuTreeRefnextTick(()=>{
            menuIdList.forEach(menuId=>{
                menuTreeRef.value.setChecked(menuId,true,false)})})})}onMounted(()=>{getRoleMenuByRoleId()})functionsaveRoleMenu(){// 这里要注意下顺序, 半选的要在前面, 选中状态的要在后面// （半选状态对于后台权限来说是有意义的, 若子节点被选中, 那么该子节点的所有父节点都应该要有）let menuIdList =[...menuTreeRef.value.getHalfCheckedKeys(),...menuTreeRef.value.getCheckedKeys(false)]saveRoleMenuApi({...roleInfo.value, menuIdList }).then(res=>{
        Messager.ok('保存成功')
        instance.data.isSaved =true// 记录保存, 通过instance访问组件实例上data配置项的数据
        router.push({...instance.data.formerRoute })// 回到之前的路由去})}functiongoBack(){
    instance.data.isSaved =true// 记录保存, 通过instance访问组件实例上data配置项的数据if(instance.data.formerRoute.path){
        router.push({...instance.data.formerRoute })}else{
        router.push('/sys/role')}}/* 在路由离开之前, 判断是否是点击保存值后离开的, 
  如果不是点击保存后离开的, 就弹框问是不是要离开, 
  如果确定是, 就离开, 并关闭页签, 如果不是, 就取消离开, */onBeforeRouteLeave((to, from, next)=>{// console.log('beforeRouteLeave');if(!instance.data.isSaved){
        msgBoxer.confirm('您确定要离开当前页面么?').then(res=>{next()// 关闭当前页签
            tagsViewStore.closeSpecifiedTag({name: route.name})}).catch(err=>{next(false)})}else{next()// 关闭当前页签
        tagsViewStore.closeSpecifiedTag({name: route.name})}})

console.log('setup...');</script><stylelang="scss"scoped></style>