[Vuejs]-Experiencing navbar flicker with Vue.js

by

0👍

✅

When using bootstrap-vue there are two ways to add links to the navbar. One is to bind to :href attribute, which creates a regular html anchor. The other is to use :to attribute, which creates a link that interacts with vue-router.

<b-navbar-nav v-if="isAuthenticated()">
    <b-nav-item v-for="nav in authenticated" :key="nav.title" :to="nav.url">{{nav.title}}</b-nav-item>
</b-navbar-nav>
<b-navbar-nav v-if="!isAuthenticated()">
    <b-nav-item v-for="nav in unauthenticated" :key="nav.title" :to="nav.url">{{nav.title}}</b-nav-item>
</b-navbar-nav>

No reason to use <template> tags here to encapsulate the . Also note that ‘is-nav-bar’ is deprecated. See here where they note the deprecation.

👤Todd Baur

0👍

What code executes when you click one of the links is not stated, I assume it’s something like this.$router.push(url). If this is the case, you’ve probably have included your navbar in the <router-view>, so when you switch current route, components inside <router-view> rerender, so the navbar flashes. Move them out of the <router-view> should fix this.

edit: so the OP is not using vue-router yet, in this case, either manually change the root component’s data to make parts other than the navs change, or add vue-router and use this.$router.push() to navigate so parts outside <router-view> won’t change or flash.

Anyway, we need the vue component to stay to let vue to rerender only part of the view, while simply navigating by <a> or something will destruct everything and reconstruct them again, hence the flashing.

👤JJPandari

Leave a comment