Что я хочу сделать:
Страницы : На главную, О Диалоги : UserPropertiesDialog, EmailConfirmDialog
На маршруте '/ settings' показать любую из страниц и над ней ' UserPropertiesDialog '; На маршруте '/ settings / emailConfirm' покажите любую из страниц и над ней ' EmailConfirmDialog '; А из UserPropertiesDialog можно перейти к EmailConfirmDialog
Какая у меня проблема:
При переходе от '/' к '/ settings' у меня появляется пустая страница в окне просмотра по умолчанию и UserPropertiesDialog над ней в диалоговом окне.
Мой код:
Приложение. vue
html код:
<v-app>
...
<v-content>
<v-dialog v-model="showDialog">
<router-view name="commonDialog" />
</v-dialog>
<router-view />
</v-content>
...
</v-app>
js код:
watch: {
$route: {
immediate: true,
handler: function(newVal, oldVal) {
this.showDialog = newVal.meta && newVal.meta.showDialog
}
}
},
маршрутизатор. js
const router = new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'home',
component: Home,
meta: { requiresAuth: true }
},
{
path: '/settings',
name: 'settings',
components: {
default: null, // << Here I need to display current component. E.g. Home, About, ...
commonDialog: UserPropertiesDialog // << My page to display in dialog
},
meta: { requiresAuth: true, showDialog: true },
children: [
{
path: '/emailConfirm',
meta: { requiresAuth: true, showDialog: true },
components: {
default: null, // << Here I need to display current component. E.g. Home, About, ...
commonDialog: EmailConfirmDialog // << Here another page for displaying in dialog
}
}
]
},
]
})
PS
Если мой путь мертв, как достичь этой цели каким-либо другим способом? Я использую vue, vuex, vue -router, vuetify. js Или лучше сделать это без маршрутизации, используя только v-диалог. Но у меня есть маниакальная мысль, что у меня должен быть только один диалог и показывать страницы. Также мне нужно перемещаться внутри диалога, не могу достичь или не знаю, как перемещаться по страницам внутри диалога. Если один из способов диалога не стоит того, скажите это, пожалуйста.