Отображать вложенные маршруты как отдельные страницы в VueJS - PullRequest
Новая
       5

Отображать вложенные маршруты как отдельные страницы в VueJS

0 голосов
/ 18 марта 2020

Я использую собственный компонент маршрутизатора VueJS. В моем интерфейсе администратора есть одна страница, на которой показан обзорный список, а другая страница с указанием c параметров для одной записи. 

function configRoutes() {
    return [
        {
            path: '/',
            redirect: '/default',
            name: 'Home',
            component: TheContainer,
            children: [
                {
                    path: 'admin/viewerRoles',
                    name: 'List',
                    component: AdminViewerRoles,
                    children: [
                        {
                            path: ':id-:name',
                            name: 'Settings',
                            component: AdminViewerRoleSettings
                        }
                    ]
                }
            ]
        }
    ]
}

При таком подходе я могу поместить тег <router-view /> в мой компонент AdminViewerRoles. Это отобразит страницу с подробностями как окно просмотра. Что меня интересует, так это то, можно ли визуализировать одно из представлений, не отказываясь от синтаксически правильного, вложенного подхода навигации.

Моя идея заключалась бы в размещении тега <router-view /> и обычного содержимого страницы в два различные div элементы и отображать их условно с помощью v-if. Но действительно ли это лучший подход?

Это была бы моя идея (не проверено): 

<template>
  <div v-if="$route.params.id">
    <router-view />
  </div>
  <div v-else>
    <table>...</table>
  </div>
</template>
...