How to get the name of a component or routing page in the outer layer?

[warmthsea]

Playground Demo

[Shyam-Chen]

<script lang="ts" setup>
import { ref } from 'vue';

import Comp from './Comp.vue';

const target = ref();

function getCompName() {
  console.log(target.value.$options.name);
}
</script>

<template>
  <Comp ref="target" />
  <button type="button" @click="getCompName">Get Comp Name</button>
</template>

[warmthsea]

<script lang="ts" setup>
import { ref } from 'vue';

import Comp from './Comp.vue';

const target = ref();

function getPageName() {
  console.log(target.value.$options.name);
}
</script>

<template>
  <Comp ref="target" />
</template>

In routing, I want to get the name of the current route?

[Shyam-Chen]

https://router.vuejs.org/guide/essentials/named-routes.html#Named-Routes

import { useRoute } from 'vue-router';

const route = useRoute();

console.log(route.name);

[warmthsea]

https://router.vuejs.org/guide/essentials/named-routes.html#Named-Routes

import { useRoute } from 'vue-router';

const route = useRoute();

console.log(route.name);

Thank you very much for your answer, but this is route name, It is not the name of defineOptions

[Shyam-Chen]

The answer to defineOptions is already provided at the beginning above. If you want to declare the name of a route component, please declare it on the route.

[warmthsea]

<scripts setup lang="ts">
const routeCompRef = ref()

const getCompName = () =>{
   console.log(routeCompRef .value.$options.name);
}
</scripts>
<template>
  <router-view>
      <template #default="{ Component }">   
          <KeepAlive :include="[]">
             <component :is="Component" ref="routeCompRef" />
          </KeepAlive>
      </template>
  </router-view>
</template>

@Shyam-Chen Thanks, it's a feasible solution.