b-nav-item: Option for plain link when using vue-router

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>

[vandorjw]

A working example:

https://github.com/vandorjw/assessment-web/blob/master/src/components/blocks/HeaderBlock/Header.vue#L11

demo: https://vandorjw.github.io/assessment-web/#/

<b-nav-item :to="{ name: 'SurveyList'}">Survey List</b-nav-item>

It didn’t work for me without the : colon in front of to

Correct: :to= Incorrect to=

[tmorehouse]

@abinhho <b-nav-item> supports the href prop which renders a plain link, the to prop will render a router-link