Vue рендеринг только часть моего App.vue после входа в систему

Question

Я работаю над приложением Vue.js, которое почти готово, осталась одна серьезная ошибка. Ошибка / проблема в том, что когда вы заходите в / login и входите на сайт, вы перенаправляетесь через push-уведомление маршрутизатора (попытался заменить тоже), и когда это происходит, я хочу отобразить всю панель мониторинга. В настоящее время, поскольку в моем файле App.vue представление маршрутизатора является другой частью, оно отображает только информационную часть панели мониторинга, а не мой заголовок или боковую панель.

Представьте себе панель инструментов без заголовка или боковой панели. Вот что рендеринг. Я был бы в порядке, если бы мог сделать что-то вроде F5, потому что тогда все загрузилось бы корректно, хотя на входе у меня уходило до 2 секунд, что мне подходит.

Мой код шаблона файла App.vue

<template>
    <div class="fade page-sidebar-fixed page-header-fixed show page-container" v-if="!pageOptions.pageEmpty" v-bind:class="{ 
        'page-sidebar-minified': pageOptions.pageSidebarMinified, 
        'page-content-full-height': pageOptions.pageContentFullHeight, 
        'page-with-top-menu': pageOptions.pageWithTopMenu,
        'page-sidebar-toggled': pageOptions.pageMobileSidebarToggled,
        'has-scroll': pageOptions.pageBodyScrollTop
    }">
        <Header />
        <Sidebar v-if="!pageOptions.pageWithoutSidebar" />
        <div id="content" class="content" v-bind:class="{ 'content-full-width': pageOptions.pageContentFullWidth, 'content-inverse-mode': pageOptions.pageContentInverseMode }">
            <router-view></router-view>
        </div>
    </div>
    <div v-else>
        <router-view></router-view>
    </div>
</template>

Answer 1

Похоже, я решил свою проблему, она исходит от vue-router и того, как я это делаю, в своем шаблонном коде. Итак, в этом коде я проверяю логическое значение, а затем выбираю, какое представление отображать. Поэтому на всех моих страницах авторизации я установил правильное значение при выходе. Оказывается, не ...

Это было в моем файле Login.vue, идея состояла в том, чтобы при выходе из маршрута было изменено логическое значение на false, что позволило бы сделать его правильным. Это было то, что я сделал изначально, но забыл о нем около 20 минут назад.

После проверки я обнаружил, что значение по какой-то причине не изменилось. Поэтому в качестве обходного пути в части created моего файла Dashboard.vue я установил значение false в явном виде

Login.vue

beforeRouteLeave (to, from, next) {
    PageOptions.pageEmpty = false;
    next();
},

Dashboard.vue

created() {
    PageOptions.pageEmpty = false;
    ...
}

Answer 2

Основная идея состоит в том, чтобы иметь несколько базовых страниц, каждая из которых работает со своим собственным набором внутренних представлений.

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

У вас должно быть что-то вроде этого:

Компонент приложения содержит только тег представления маршрутизатора, а любые другие страницы загружаются вэто.

Тогда структура маршрутов выглядит следующим образом:

Как видите, в представлении приложения загружены два базовых представления. И тогда в базовом виде может появиться много детей. Уровень вложенных маршрутов зависит от вас. Вот содержимое моего приложения Home view:

И компонент MainContent, который содержит только вид маршрутизатора:

Хорошим примером структуры проекта является пример, сгенерированный с помощью vue-cli. Вы можете использовать его для упрощения процесса разработки с большим количеством преимуществ и хороших практических решений.