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

Posted 2023-02-22

【中文标题】在导航栏组件中结合 bootstrap-vue 和 vue-router

【英文标题】：Combining bootstrap-vue and vue-router inside navbar component

【发布时间】：2020-01-04 00:44:03

【问题描述】：

我正在尝试使用 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>

【参考方案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>      

【讨论】：

请此代码在其他页面中仍将活动添加到主页。请帮忙。

知道了...只需添加精确

【参考方案2】：

还有更简单的方法：

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