Closed
Description
How do I use the navbar component's <b-nav-item> to generate a non-router-link component? Before I was able to use the href attr instead of the to attr to get plain links vs. router-links (respectively).
My project mixes router-controlled links with real links regularly, so this is a must for me. I'm pretty sure some of the last changes switched this up on me. I've been looking for a vue-router solution, but everyone just says use a normal <a> tag. I'm trying to avoid rewriting all the bootstrap markup that this lib does for me so well though!
Here's the gist of the navbar:
<template>
<b-navbar toggleable fixed="top" type="inverse" variant="inverse">
<b-nav-toggle target="hd-navbar-content"></b-nav-toggle>
<b-link class="navbar-brand">
<a href="https://artisanhd.com">
<img src="/hd-assets/images/artisanhd-logo-light.svg" alt="ArtisanHD" height="40">
</a>
</b-link>
<b-collapse is-nav id="hd-navbar-content">
<b-nav is-nav-bar>
<b-nav-item to="/customer/">My Account</b-nav-item>
<!-- These links need to defer to the browser navigator -->
<!-- ignore the url prefixing... it's for a reverse proxy, not a vue-router thing -->
<b-nav-item :href="'/uploadconfigure/' | applyUrlPrefix">Start Order</b-nav-item>
<b-nav-item :href="'/customer/login' | applyUrlPrefix">
<span v-if="isLoggedIn">Logout</span>
<span v-else>Login</span>
</b-nav-item>
</b-nav>
</b-collapse>
</b-navbar>
</template>