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

Question

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

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>

路由器/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

根据b-navbar-nav 文档：

导航栏导航链接建立在 <b-navbar-nav> 父组件之上，并且需要使用和 <b-nav-toggle> 切换器来获得正确的响应式样式。导航栏中的导航也将占用尽可能多的水平空间，以保持导航栏内容安全对齐。

<b-navbar-nav> 支持以下组件：

• <b-nav-item> 用于链接（和路由器链接）操作项

• ...

所以你的代码应该是这样的：

  <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>      

Answer 2

还有更简单的方法：

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