<b-nav-item> is not consistent with the to attribute rendering of the <router-link> component

[long-woo]

Describe the bug

<b-nav-item> Theto attribute of the component does not have a # sign, and the route is invalid <router-link> component works

Steps to reproduce the bug

Expected behavior

Same result as to attribute of<router-link>.

Versions

Libraries:

• BootstrapVue: 2.1.0
• Bootstrap: 4.4.1
• Vue: 2.6.11
• VueRouter: 3.1.3

Environment:

• Device: Mac
• OS: macOS Catalina
• Browser: Electron
• Version: 2.0.18

[tmorehouse]

<b-nav-item> passes the to prop as-is to <router-link> (<b-nav-item> is just a wrapper for <router-link> when this.$router is detected).

Do you see the same issue when using <b-link to="/task">? <b-link> is the common wrapper for <router-link> used by all components that support the to prop.

[long-woo]

Same question.

[tmorehouse]

It almost sounds like BootstrapVue is not detecting vue-router in your app and is converting the to prop to a plain <a> tag.

I am also assuming that you are using vue router in hash mode?

As a side note, the Bootstrap Vue docs use <b-nav-item> for the top navbar (and sidebar navigation).

[tmorehouse]

How are you installing Vue router? Are you injecting the router into your top level app?:

import Vue from 'vue'
import VueRouter from 'vue-router'
import { BootstrapVue } from 'bootstrap-vue'

Vue.use(VueRouter)
Vue.use(BootstrapVue)

const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar }
  ]
})

const app = new Vue({
  router
}).$mount('#app')

[long-woo]

The pre-upgrade version " bootstrap-vue ":" ^ 2.0.0-rc.6 " is normal.

The routing configuration is as follows:

export default new Router({
  routes: [
    {
      path: '/',
      component: Main,
      children: [
        {path: '', name: 'NewTask', component: () => import('@/views/NewTask')},
        {path: 'taskmanager', name: 'TaskManager', component: () => import('@/views/TaskManager')},
        {path: 'myorder', name: 'MyOrder', component: () => import('@/views/MyOrder')}
      ]
    }
  ]
})

[jacobmllr95]

@long-woo I've created a little demo and I can't reproduce your problem: https://codesandbox.io/s/bootstrapvue-b-navbar-link-and-vue-router-ts6nb