import Vue from 'vue';
import VueRouter from 'vue-router';
import VueBreadcrumbs from 'vue-2-breadcrumbs';
Vue.use(VueRouter);
Vue.use(VueBreadcrumbs);
const Feeds = {template: '<div><router-view/></div>'};
const Biz = {template: '<div><h2>Biz</h2></div>'};
const Foo = {template: '<div><h2>Foo</h2></div>'};
const Bar = {template: '<div><h2>Bar</h2></div>'};
const router = new VueRouter({
routes: [
{path: '/', redirect: '/feeds'},
{
path: '/feeds',
component: Feeds,
meta: {
breadcrumb: 'Feeds'
},
children: [
{
path: '',
component: Biz
},
{
path: 'foo',
component: Foo,
meta: {
breadcrumb: 'foo'
}
},
{
path: 'bar',
component: Bar,
meta: {
breadcrumb: 'bar'
}
}
]
}
]
});
new Vue({
router,
template: `
<div id="app" class="container">
<ul class="nav">
<li class="nav-item dropdown">
<router-link to="/feeds" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Feeds</router-link>
<div class="dropdown-menu">
<router-link to="/feeds/foo" class="dropdown-item">Foo</router-link>
<router-link to="/feeds/bar" class="dropdown-item">Bar</router-link>
</div>
</li>
</ul>
<breadcrumbs/>
<router-view/>
</div>
`
}).$mount('#app');
