vue3获取defineOptions的值；vue3获取组件实例；vue3页面获取defineOptions的name

1.当前vue页面获取defineOptions的name

通过获取组件实例的方式获取

import { onMounted,getCurrentInstance } from "vue"defineOptions({name: "RealTimeAlarm"
})
const instance = getCurrentInstance() // 获取组件实例onMounted(() => {console.log(instance, instance?.type?.name)
})

2.通过绝对路径获取defineOptions的name

// @/utils/filter.js// 注册一个通过路径获取name的方法
export const getComponentName = async (component) => {try {const module = await componentconst componentName = module.default.name;console.log('vue页的Name:', componentName);return componentName;} catch (error) {console.error('Error loading component:', error);return null;}
}

import { getComponentName } from "@/utils/filter.js";getComponentName(import(`@/views/monitoringManagement/alarmMonitoring/realTimeAlarm/index.vue`)).then(componentNameStr => {console.log('当前vue页面的name，注意不是路由name', componentNameStr)
}).catch(console.error);

3.需求设计

当时我的vue路由是动态路由，所以我就将动态路由的name和vue页面的name通过脚本设置一致；后续我就可以通过
–知道要跳转的文件的绝对路径
–找到对应name（因为vue实例name和vue路由name一致）
–也就可以可以通过跳转到正确的路由去

router.push({ name: componentNameStr, query: { searchData: JSON.stringify(query) } })