在导航栏组件中结合 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 :to="{ path: '/' }">To home</b-navbar-brand>