在导航栏组件中结合 bootstrap-vue 和 vue-router

Question

我正在尝试使用可与 vue-router 一起使用的 bootstrap-vue 制作导航栏。导航栏运行正常，但是当我单击导航栏项目时，它不会将我路由到该页面。在我合并 bootstrap-vue 之前，路由器正在工作，所以我猜我错过了一些与 bootstrap 相关的东西？有任何想法吗？

导航栏.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>

Answer 1

还有更简单的方法：<b-navbar-brand&nbsp;:to="{&nbsp;path:&nbsp;'/'&nbsp;}">To&nbsp;home</b-navbar-brand>