Vue rendering only part of my App.vue after a login

Question

I am working on a Vue.js application that I am almost done, one major bug left. The bug/issue is that when you go to /login and login to the site you get redirected via a router push (tried replace too) and when this happens I want to render the whole dashboard. Currently since in my App.vue file the router view is a different part it only renders the dashboard info part and not my header or sidebar.

Pretty much imagine a dashboard without a header or sidebar. That's what's rendering. I'd be okay if I could do something like F5 does because then it all would load correctly though taking up to 2 seconds longer on login which is okay by me.

My App.vue file template code

<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>

One of reasons may be wrong structure of routes, so dashboard is rendering into router view in v-else block. — Timur Gilauri
You are sorta right, so it is rendering into that though I'm not sure how to make sure only certain pages go to the else, the if pretty much checks a config file. If I remove the if and comment the else out it shows the header/sidebar for all pages including login which I don't want. Not sure what you mean by the routes are wrong? They all work as expected, it's the view that's the issue. — joshk132
I think the best way is to make structure as I mentioned in my answer. The key idea is to have base views and render everything else inside them. It is not dificult to change your project to follow this way. But still it is up to you. — Timur Gilauri
@TimurGilauri See my answer, the solution was way simpler than doing a massive refactor. I like simple and effective solutions. — joshk132

joshk132 joshk132 · Accepted Answer · 2019-10-30T23:10:05

Looks like I have resolved my issue, it comes from vue-router and how I am doing that if statement in my template code. So in that code I am checking a boolean value then choosing which view to render. So I had though on all of my auth pages I set the value correctly on exit. Turns out not...

This was in my Login.vue file, idea was to have on an exit of the route that it would change the boolean to false which would let me render it right. This was something I did initally but had forgotten about till about 20 minutes ago.

Upon checking this I found the value was not being changed for some reason. So as a work around in the created part of my Dashboard.vue file I set the value to false explicitly

Login.vue

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

Dashboard.vue

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

Vue rendering only part of my App.vue after a login

2 Answers