Как использовать router-view внутри router-view (не вложенные роуты)?

Question

[Антон Шелестов]

Попробую описать что хочу сделать)
Начал изучать vue и захотел сделать для себя небольшую админку.

Сделал форму аутентификации и главную страницу залогиненного пользователя. Все работает. Но, как я понял, при переходе на другой роут у меня будет перерисовываться вся страница, что кажется не правльно когда пользователь уже залогинен.

Т.е. есть страницы аутентификации, сделаю потом страницу регистрации, восстановления пароля и т.д. При переходе между ними все понятно, страница перерисовывается.

Но после аутентификации загружается страница залогиненного пользователя, она состоит из шапки, сайдбара с меню, футера и основного контента.
Вот тут по идее при следующих переходах должен менятся только контент.

Код который есть выгрузил на git т.к. его много для сообщения:
https://github.com/shelestovas/vue-test

Ну и резюмируя, вопрос, как правильней организовать структуру приложения чтобы все правильно работало?
Спасибо!

Думал создать разные экземпляры vue, но что-то не могу сообразить как их потом связать

Comments

[JhaoDa]

форму авторизации

страницы авторизации

это аутентификация, а не авторизация.

[Антон Шелестов]

пардон за необразованность, путаю термины постоянно, исправил

Answer 1

[Evgeny Kulakov]

У вас должен быть компонент вида:

<!-- index.vue -->
<div>
  <header/>
  <menu/>
  <content>
    <router-view></router-view>
  </content>
<footer/>
</div>

Соответственно при навигации будет отображаться заданный компонент.
Роуты должны примерно так выглядеть:

{
  path: '/',
  component: index,
  children: [
    { 
      path: 'dashboard',
      component: dashboard
    },
    { 
       // other route
    }
  ]
}

Comments

[Антон Шелестов]

Да, сначало я не хотел через children, но наверно это самый адекватный и правильный вариант.
у меня сейчас вот такие роуты

export const routes = [
    {
        path: '/auth/login',
        component: Login,
        name: 'login'
    },
    {
        path: '/admin/dashboard',
        component: AdminLayout,
        children: [
            {
                path: '/admin/dashboard',
                name: 'dashboard',
                component: Dashboard,
                meta: {
                    requiresAuth: true
                },
            },
            {
                path: '/admin/users',
                name: 'users',
                component: UserLists,
            },
        ]
    }
];

Подсмотрел в другой SPA админке, вроде пока работает.
только requiresAuth: true наверно удалю и добавлю в роутам аутентификации типа isPublic: true чтобы меньше админкие роуты править

[Evgeny Kulakov]

Антон Шелестов, вот так бы я оформил:

{
        path: '/admin',
        component: AdminLayout,
        redirect: { name: 'dashboard' },
        children: [
            {
                path: 'dashboard',
                name: 'dashboard',
                component: Dashboard,
                meta: {
                    requiresAuth: true
                },
            },
            {
                path: 'users',
                name: 'users',
                component: UserLists,
            },
        ]
    }

[Антон Шелестов]

Evgeny Kulakov, ок, так красивше)