[英]Combining bootstrap-vue and vue-router inside navbar component
我正在尝试使用可与 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>
路由器/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',
});
主要.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/>'
});
应用程序.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>
根据b-navbar-nav
文档:
Navbar 导航链接建立在
<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>
还有更简单的方法:
<b-navbar-brand :to="{ path: '/' }">To home</b-navbar-brand>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.