useRouteNames

Return a ComputedRef<string[]> containing the names of every matched route record, from outermost to innermost. Records without a name are skipped.

Importing

import { useRouteNames } from '@basmilius/common';

Usage

<script setup lang="ts">
    import { useRouteNames } from '@basmilius/common';

    const names = useRouteNames();
</script>

<template>
    <ol class="breadcrumbs">
        <li v-for="name in names" :key="name">{{ name }}</li>
    </ol>
</template>

This is the building block behind useIsView. Reach for it directly when you need the full chain — for example to render breadcrumbs or to drive analytics page-views from a stable hierarchy.

Type signature

declare function useRouteNames(): ComputedRef<string[]>;

See also

• useIsView
• useRouteMeta