Как организовать вложенную навигация по каталогу на Vue?

Question

[Николай Семенов]

Ребятушки всем привет. Чё ето я запутался с навигацией, помогите.

Допустим есть некий список категорий(компонент) который открывается по ссылке "меню" "/menu"
далее кликнув по ссылки категории я должен перейти по ссылке "/menu/название категории"

там по ссылке аналогичным списком выводятся товары категории и вот нажав на товар можно перейти в его детаил.
подскажите в каком направлении двигаться

Answer 1

[Alexander Pushkarev]

Вот это - https://router.vuejs.org/ru/

Comments

[Николай Семенов]

читал конечно, но там не разбирается описанный мной пример

сделал вот такой роут:

import HomePage from './pages/HomePage.vue';
import MenuPage from './pages/MenuPage.vue';
import CategoriesPage from './pages/CategoriesPage.vue';
import CategoryPage from './pages/CategoryPage.vue';
import CartPage from './pages/CartPage.vue';
import ProfilePage from './pages/ProfilePage.vue';
import RestourantsPage from './pages/RestourantsPage.vue';
import PromoPage from './pages/PromoPage.vue';

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

но работает некорректно

[Антон Антон]

Николай Семенов: children используется если в самом дочернемкомпоненте есть router-view. Если это равноправные страницы, то несколько путей делать вида:

{path: '/menu',...},
{path: '/menu/:category',...},
{path: '/menu/:category/:sku',...},