How else to pass name to the route object?

Question

JavaScript

Guys, how to pass a route name from a component
, there are these ways:

export const routes = [
    //{ path: '/', component: HomePage },
    { path: '/menu', component: MenuPage, children: [
        { path: '', component: CategoriesPage, name: 'Меню'},
        { path: ':categoryId', component: CategoryPage, children: [
            { path: '', component: ProductsPage },
            { path: ':productId', component: ProductPage }
        ] } 
    ] },
    { path: '/profile', component: ProfilePage, name: 'Профиль' },
    { path: '/cart', component: CartPage, name: 'Корзина' },
    { path: '/promo', component: PromoPage, name: 'Акции' },
    { path: '/restourants', component: RestourantsPage, name: 'Рестораны' }
];

With non-dynamic components, there is no problem to set a name, but how to be dynamic, such as
{ path: ':categoryId', component: CategoryPage,
how to make the name change depending on the name of the category,
I should display the current location on top as follows code:
{{ $route.name }}

Answer 1

It doesn't seem like the right approach to try to change $route.name.
In CategoriesPage, most likely you get a list with categories, save this list in the store, i.e. you should have an object like:

categories: 
  [{id: 1, name: 'Категория 1'},
   {id: 2, name: 'Категория 2'},
   {id: 3, name: 'Категория 3'}]

Further, when clicking on a link with a certain category, pass the category id to the CategoryPage component and in this component, by id, get the category name from the store and display it. Similarly, in the CategoryPage, you must take a list of products from the backend and display it, when you click on a specific product, pass the id of this product to the component that will be responsible for its display, and in it, by this id, you get the name of the product.