网站建设用款,Pk10网站建设多少钱,mega Wordpress,自学软件开发学习链接
Vue Router获取当前页面由哪个路由跳转 在Vue3的setup中如何使用this beforeRouteEnter 在这个路由方法中不能访问到组件实例this#xff0c;但是可以使用next里面的vm访问到组件实例#xff0c;并通过vm.$data获取组件实例上的data数据getCurrentInstance 是vue3提…学习链接
Vue Router获取当前页面由哪个路由跳转 在Vue3的setup中如何使用this beforeRouteEnter 在这个路由方法中不能访问到组件实例this但是可以使用next里面的vm访问到组件实例并通过vm.$data获取组件实例上的data数据getCurrentInstance 是vue3提供的获取组件实例的方法可通过getCurrentInstance函数获取了当前组件实例对象并通过instance.data.message和instance.ctx.sayHello访问了组件实例的数据和方法
templatediv classmain-boxdiv classtitle菜单权限/divdiv classrole-menu-box v-loadingdataLoadingdiv classrole-menu-headerel-form inline :modelroleInfo refroleInfoRef :rulesroleInfoRules label-width80pxel-form-item label角色名称 proproleNameel-input v-modelroleInfo.roleName/el-input/el-form-itemel-form-item label角色标识 proproleLabelel-input v-modelroleInfo.roleLabel/el-input/el-form-item/el-form/divdiv classrole-menu-bodyel-scrollbarel-tree :propsdefaultProps node-keyid :expand-on-click-nodefalse check-on-click-nodedefault-expand-all refmenuTreeRef show-checkbox :dataroleMenuTreeData/el-tree/el-scrollbar/divdiv classrole-menu-footerel-button clickgoBack返回/el-buttonel-button typeprimary clicksaveRoleMenu保存/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...);
/scriptstyle langscss scoped/style
