Как реализовать дочерний роутинг VueJs?

Question

[midiks1]

Есть вот такой роутинг

{
    path: "/user/:id",
    component: User,
    children: [{
        path: "profile",
        name: "profile",
        component: Profile
    },
    {
        path: "articles",
        name: "articles"
        component: Articles
    }]
}

Внутри компонента User ( parent ) у меня в created загружается базовая информация о пользователе
Внутри Articles, Profile уже грузится информация под каждый компонент отдельно ( так же в created )

Когда я делаю router.push({ name: "articles", id: 1 }), то всё окей: компонет User загружает базовую информация, а конпонент Articles статьи пользователя, но когда я сделаю router.push({ name: "articles", id: 2 }), то User работает великолепно, но Articles оставляет статьи пользователя 1 ( он не обновляется, то есть created с загрузкой не срабатывает и сохраняются данные от прошлой перелинковки )

Answer 1

[midiks1]

Наиболее гуманный способ обойти такую проблему использование key для router-view,
а именно для router-view в компоненте User

<router-view :key="$route.params.id" /> <!-- Когда значение в key меняется, то происходит forceUpdate - поэтому нам id пользователя  -->

также можно добавить watch на параметр id, но с этим будут проблемы

Comments

[Дмитрий]

Документацию читать пробовали?