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

文章目录

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

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

javascript 复制代码

import { onMounted,getCurrentInstance } from "vue"


defineOptions({
  name: "RealTimeAlarm"
})
const instance = getCurrentInstance() // 获取组件实例


onMounted(() => {
  console.log(instance, instance?.type?.name)
})

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

javascript 复制代码

// @/utils/filter.js

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

javascript 复制代码

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一致）

--也就可以可以通过跳转到正确的路由去

javascript 复制代码

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