VueJS Детский компонент маршрутизации

Question

Я застрял с моим первым Vue приложением (которое является частью большого ASP MVC. net приложения) У меня есть приложение с тремя страницами.

<router-link to="/Controller/FirstPage" class="list-numbered-item">
  FirstPage
</router-link>
... SecondPage, LastPage...

<div class="content-main">
  <router-view></router-view>
</div>

export const routes = [
    {
        name: 'Home',
        path: '/Controller/FirstPage',
        component: FirstPage,
    },
    {
        name: 'SecondPage',
        path: '/Controller/SecondPage',
        component: SecondPage,
    },
    {
        name: 'LastPage',
        path: '/Controller/LastPage',
        component: LastPage,
    },
];


let router = new VueRouter({
    mode: 'history',
    linkActiveClass: "active", 
    linkExactActiveClass: "active",
    routes
});

export default router;

Эта часть кажется нормальной.

Проблема с моей SecondPage. Эта страница содержит два отдельных блока, и интересующий меня блок является своего рода каталогом продукции. Нажмите на любую категорию, предоставляющую запрос с $axios до /Controller/GetData?key=111, и затем я использую ответ для обновления свойства data (). Но теперь я знаю, что Vue Маршрут имеет функцию с дочерними маршрутами.

Я пытался добавить что-то подобное в мой объект маршрута:

    {
        name: 'SecondPage',
        path: '/Controller/SecondPage',
        component: SecondPage,
        children: [
            {
                path: 'Controller/Catalog',
                component: CatalogComponent,
            },
        ]
    },

И мой блок каталога на Теперь у SecondPage есть ссылки на категории и разделы просмотра маршрутизатора.

<router-link to="/Controller/Catalog/GetData?key=111">Category 1</router-link>
... Category 2, Category 3...

<div class="catalog-div">
  <router-view></router-view>
</div>

Мне нужно выбрать любую категорию и посмотреть данные о продукте в блоке моего каталога. Но любой щелчок перенаправляет меня с /Controller/SecondPage на /Controller/Catalog/GetData***. Как я могу добавить маршрутизацию в свой блок каталога и остаться на SecondPage? Или, может быть, это неправильный способ справиться с таким вариантом использования? Спасибо!

Answer 1

Если вы пытаетесь добавить дочерний элемент route для компонента SecondPage

, добавьте route следующим образом

{
    name: 'SecondPage',
    path: '/Controller/SecondPage',
    component: SecondPage,
    children: [
        {
            name: 'catalog' // use name for navigation
            path: 'Catalog/:key', // using key as parameter
            component: CatalogComponent,
        },
    ]
},

Теперь внутри компонента

<router-link :to="{name:'catalog',params:{key:111}}">Category 1</router-link>

При нажатии он перейдет к пути /Controller/SecondPage/Catalog/111

Обратите внимание, что key будет добавляться с URL-адресом в качестве параметра, а не в виде запроса.

Нет необходимости используйте имя, вы можете использовать путь вместо этого.