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 },
],
},
},
]