Vue-router meta params for breadcrumbs

Я написал компонент хлебных крошек в который через meta передается название и ссылка. все работает отлично пока я не пытаюсь передать в meta параметр маршрута. в консоли получаю ошибку route is not defined Подскажите, пожалуйста, как правильно передавать параметры маршрута в мету?

Компонент хлебных крошек (breadcrumbs)

<template>
    <div class="bg-gray-200 dark:bg-gray-600">
        <div class="container flex items-center px-6 mx-auto overflow-y-auto">
            <template v-if="$route.name !== root && $route.meta.breadcrumbs">
                <router-link :to="{ name: root }" class="p-2 text-xs font-bold text-gray-500 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-white cursor-pointer"><fa-icon icon="fa-solid fa-house" /></router-link>
                <span><fa-icon icon="fa-solid fa-angle-right" class="text-xs font-bold text-gray-500 dark:text-white" /></span>

                <template v-for="(crumb, index) in $route.meta.breadcrumbs" :key="index">
                    <router-link :to="{ name: crumb.link }" v-if="index !== $route.meta.breadcrumbs.length - 1" class="p-2 mt-0.5 text-xs font-bold text-gray-500 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-white cursor-pointer">
                        {{ crumb.name }}
                    </router-link>
                    <span v-else class="p-2 mt-0.5 text-xs font-bold text-gray-500 dark:text-gray-100 opacity-50 cursor-not-allowed">
                        {{ crumb.name }}
                    </span>
                    <span><fa-icon icon="fa-solid fa-angle-right" v-if="index !== $route.meta.breadcrumbs.length - 1" class="text-xs font-bold text-gray-500 dark:text-gray-100"  /></span>
                </template>
            </template>
        </div>
    </div>
</template>

<script>

export default {
    name: "breadcrumbs",

    props:{
        root: {
            type: String,
            default: 'public.home'
        },
    },

}
</script>

Основной файл маршрута, в котором подключается маршруты для различных частей приложения

import {createWebHistory, createRouter} from "vue-router";
import {nextTick} from 'vue';
import AuthRoutes from './auth_routes'
import ErrorRoutes from './error_routes'
import PublicRoutes from './public_routes'
import DashboardRoutes from './dashboard_routes'
import LmsRoutes from './lms_routes'
import PanelRoutes from './panel_routes'

export const routes = [
    ...AuthRoutes,
    ...ErrorRoutes,
    ...PublicRoutes,
    ...DashboardRoutes,
    ...LmsRoutes,
    ...PanelRoutes,
]

const router = createRouter({
    history: createWebHistory(),
    routes: routes,
});
 
const DEFAULT_TITLE = 'Портал';
router.afterEach((to) => {
    nextTick(() => {
        document.title = to.meta.title || DEFAULT_TITLE;
    });
});

export default router;

Файл маршрутов публичной части, в нем я и пытаюсь передать параметр (route.params.type)

export default [
    {
        name: 'public.schedule',
        path: '/schedule',
        components: {
            default: () => import('../views/public/schedule'),
            navbar: () => import('../components/layouts/navBar'),
            breadcrumbs: () => import('../components/UI/breadcrumbs'),
            footer: () => import('../components/layouts/footerApp'),
        },
        meta: {
            requiresAuth: false ,
            title: 'Расписание общее',
            breadcrumbs: [
                { name: 'Расписание общее' },
            ],
        },
    },
    {
        name: 'public.schedule.type',
        path: '/schedule/:type',
        props: true,
        components: {
            default: () => import('../views/public/schedule'),
            navbar: () => import('../components/layouts/navBar'),
            breadcrumbs: () => import('../components/UI/breadcrumbs'),
            footer: () => import('../components/layouts/footerApp'),
        },
        meta: {
            requiresAuth: false ,
            title: 'Расписание ' + route.params.type,
            breadcrumbs: [
                { name: 'Расписание общее', link: 'public.schedule' },
                { name: 'Расписание ' + route.params.type },
            ],
        },
    },
]

Ответы (0 шт):