vue3回到上一个路由页面

学习链接

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

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

<template><div class="main-box"><div class="title">菜单权限</div><div class="role-menu-box" v-loading="dataLoading"><div class="role-menu-header"><el-form inline :model="roleInfo" ref="roleInfoRef" :rules="roleInfoRules" label-width="80px"><el-form-item label="角色名称" prop="roleName"><el-input v-model="roleInfo.roleName"></el-input></el-form-item><el-form-item label="角色标识" prop="roleLabel"><el-input v-model="roleInfo.roleLabel"></el-input></el-form-item></el-form></div><div class="role-menu-body"><el-scrollbar><el-tree :props="defaultProps" node-key="id" :expand-on-click-node="false" check-on-click-nodedefault-expand-all ref="menuTreeRef" show-checkbox :data="roleMenuTreeData"></el-tree></el-scrollbar></div><div class="role-menu-footer"><el-button @click="goBack">返回</el-button><el-button type="primary" @click="saveRoleMenu">保存</el-button></div></div></div>
</template>
<script>
import msgBoxer from '@/utils/msgBoxer'
export default {// name: 'roleMenu', // 这个组件不应该被缓存下来, 因此需要让 路由名称 与 组件名称不一致data() {return {formerRoute: {},isSaved: false}},// 在进入路由的时候, 记录进入之前的路由beforeRouteEnter(to, from, next) {next(vm => {// 通过 `vm` 访问组件实例let { query, params, path } = fromvm.$data.formerRoute = { query, params, path }  // 没有this, 只能通过vm去访问组件实例上的数据})},}
</script>
<script setup>
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'// 使用tagsViewStore
import 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({})// 菜单树ref
const menuTreeRef = ref(null)// 菜单树数据
let roleMenuTreeData = ref([])const roleInfoRules = {roleName: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],roleLabel: [{ required: true, message: '角色标识不能为空', trigger: 'blur' }]
}function getRoleMenuByRoleId() {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()
})function saveRoleMenu() {// 这里要注意下顺序, 半选的要在前面, 选中状态的要在后面// （半选状态对于后台权限来说是有意义的, 若子节点被选中, 那么该子节点的所有父节点都应该要有）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 }) // 回到之前的路由去})
}function goBack() {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><style lang="scss" scoped></style>