Combining bootstrap-vue and vue-router inside navbar component

Question

I'm trying to make a navbar with bootstrap-vue that works with vue-router. The navbar is functioning properly but when I click on a navbar item it doesn't route me to the page. The router was working before I incorporated bootstrap-vue so I'm guessing I'm missing something bootstrap related? Any ideas?

Navbar.vue:

<template>
    <div>
        <b-navbar 
            toggleable="lg"
            type="light"
            variant="light"
        >
            <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
            <b-collapse id="nav-collapse" is-nav>
                <b-navbar-nav>
                    <b-link
                        active-class="active"
                        class="nav-link"
                        v-for="routes in links"
                        :key="routes.id"
                        :to="routes.path"
                    >
                        <b-nav-item>
                            {{ routes.name }}
                        </b-nav-item>
                    </b-link>
                </b-navbar-nav>
            </b-collapse>
        </b-navbar>

        <router-view></router-view>
    </div>
</template>

<script>

export default {
    name: 'Navbar',
    data() {
        return {
            links: [
                {
                    id: 0,
                    name: 'Home',
                    path: '/',
                },
                {
                    id: 1,
                    name: 'RSVP',
                    path: '/RSVP',
                },
                {
                    id: 2,
                    name: 'Pictures',
                    path: '/pictures',
                },
                {
                    id: 3,
                    name: 'Contact',
                    path: '/contact',
                },
            ],
        }
    },
}

</script>

router/index.js:

import Vue from 'vue';
import router from 'vue-router';
import Home from '../components/Home';
import RSVP from '../components/RSVP';
import Pictures from '../components/Pictures';
import Contact from '../components/Contact';

Vue.use(router);

export default new router({
    routes: [
        {
            path: '/',
            name: 'Home',
            component: Home
        },
        {
            path: '/RSVP',
            name: 'RSVP',
            component: RSVP
        },
        {
            path: '/pictures',
            name: 'Pictures',
            component: Pictures
        },
        {
            path: '/contact',
            name: 'Contact',
            component: Contact
        },
    ],
    mode: 'history',
});

main.js:

import Vue from 'vue';
import App from './App';
import router from './router';
import BootstrapVue from 'bootstrap-vue'

Vue.use(router);
Vue.use(BootstrapVue);
Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    components: { App },
    template: '<App/>'
});

App.vue:

<template>
    <div id="app">
        <Navbar />
</div>
</template>

<script>

import Home from './components/Home';
import Navbar from './components/Navbar';
import RSVP from './components/RSVP';
import Contact from './components/Contact';
import Pictures from './components/Pictures';

export default {
    name: 'app',
    created () {
        document.title = "title";
    },
    components: {
        Home,
        Navbar,
        RSVP,
        Contact,
        Pictures,
    },
}

</script>

<style lang="css">

@import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

</style>

Answer 1

There is more simple way:

<b-navbar-brand :to="{ path: '/' }">To home</b-navbar-brand>

Answer 2

According to b-navbar-nav documentation :

Navbar navigation links build on the <b-navbar-nav> parent component and requires the use of and <b-nav-toggle> toggler for proper responsive styling. Navigation in navbars will also grow to occupy as much horizontal space as possible to keep your navbar contents securely aligned.

<b-navbar-nav> supports the following components:

• <b-nav-item> for link (and router-link) action items

• ...

so your code should be like :

  <b-nav-item active-class="active" class="nav-link" v-for="routes in links" 
    :key="routes.id" :to="routes.path" >
   {{ routes.name }} 
 </b-nav-item>