11# <a href =" https://vuejs.org " target =" _blank " ><img valign =" text-bottom " height =" 49 " src =" https://vuejs.org/images/logo.png " ></a > breadcrumbs
2- > Vue breadcrumbs builds on the official [ vue-router] ( https://github.com/vuejs/vue-router ) package to provide simple breadcrumbs. [ Demo] ( http://inside-demo.github.io/vue-demo/#/feeds )
2+ > Vue breadcrumbs builds on the official [ vue-router] ( https://github.com/vuejs/vue-router ) package to provide simple breadcrumbs. [ Demo] ( http://inside-demo.github.io/vue-demo/#/feeds )
33
44[ ![ Travis Build Status] ( https://img.shields.io/travis/GitScrum/vue-2-breadcrumbs/master.svg?style=flat-square&label=unix )] ( https://travis-ci.org/GitScrum/vue-2-breadcrumbs ) [ ![ vue2] ( https://img.shields.io/badge/vue-2.x-brightgreen.svg?style=flat-square )] ( https://vuejs.org/ ) [ ![ node] ( https://img.shields.io/node/v/post-sequence.svg?maxAge=2592000&style=flat-square )] ( ) [ ![ npm version] ( https://img.shields.io/npm/v/vue-2-breadcrumbs.svg?style=flat-square )] ( https://www.npmjs.com/package/vue-2-breadcrumbs ) [ ![ Dependency Status] ( https://david-dm.org/gitscrum/vue-2-breadcrumbs.svg?style=flat-square )] ( https://david-dm.org/gitscrum/vue-2-breadcrumbs ) [ ![ XO code style] ( https://img.shields.io/badge/code_style-XO-5ed9c7.svg?style=flat-square )] ( https://github.com/sindresorhus/xo ) [ ![ Coveralls status] ( https://img.shields.io/coveralls/GitScrum/vue-2-breadcrumbs.svg?style=flat-square )] ( https://coveralls.io/r/GitScrum/vue-2-breadcrumbs )
55
@@ -94,22 +94,22 @@ new Vue({
9494 router,
9595 template: `
9696 <div id="app" class="container">
97- <ul class="nav">
98- <li class="nav-item dropdown">
99- <router-link to="/feeds" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Feeds</router-link>
100- <div class="dropdown-menu">
101- <router-link to="/feeds/foo" class="dropdown-item">Foo</router-link>
102- <router-link to="/feeds/bar" class="dropdown-item">Bar</router-link>
103- <router-link to="/feeds/1" class="dropdown-item">Other Feed 1</router-link>
104- <router-link to="/feeds/2" class="dropdown-item">Other Feed 2</router-link>
105- <router-link to="/feeds/3" class="dropdown-item">Other Feed 3</router-link>
106- </div>
107- </li>
108- </ul>
109- <breadcrumbs/>
110- <router-view/>
97+ <ul class="nav">
98+ <li class="nav-item dropdown">
99+ <router-link to="/feeds" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Feeds</router-link>
100+ <div class="dropdown-menu">
101+ <router-link to="/feeds/foo" class="dropdown-item">Foo</router-link>
102+ <router-link to="/feeds/bar" class="dropdown-item">Bar</router-link>
103+ <router-link to="/feeds/1" class="dropdown-item">Other Feed 1</router-link>
104+ <router-link to="/feeds/2" class="dropdown-item">Other Feed 2</router-link>
105+ <router-link to="/feeds/3" class="dropdown-item">Other Feed 3</router-link>
106+ </div>
107+ </li>
108+ </ul>
109+ <breadcrumbs/>
110+ <router-view/>
111111 </div>
112- `
112+ `
113113}).$mount (' #app' );
114114```
115115## Options
@@ -120,14 +120,13 @@ import Vue from 'vue';
120120import VueBreadcrumbs from ' vue-2-breadcrumbs' ;
121121
122122Vue .use (VueBreadcrumbs, {
123- template:
124- ' <nav v-if="$breadcrumbs.length" aria-label="breadcrumb">\n ' +
125- ' <ol class="breadcrumb">\n ' +
126- ' <li v-for="(crumb, key) in $breadcrumbs" v-if="crumb.meta.breadcrumb" :key="key" class="breadcrumb-item active" aria-current="page">\n ' +
127- ' <router-link :to="{ path: crumb.path }">{{ getBreadcrumb(crumb.meta.breadcrumb) }}</router-link>' +
128- " </li>\n " +
129- " </ol>\n " +
130- " </nav>"
123+ template:
124+ ' <nav v-if="$breadcrumbs.length" aria-label="breadcrumb">\n ' +
125+ ' <ol class="breadcrumb">\n ' +
126+ ' <li v-for="(crumb, key) in $breadcrumbs" v-if="crumb.meta.breadcrumb" :key="key" class="breadcrumb-item active" aria-current="page">\n ' +
127+ ' <router-link :to="{ path: crumb.path }">{{ getBreadcrumb(crumb.meta.breadcrumb) }}</router-link>' +
128+ ' </li>\n ' +
129+ ' </ol>\n ' +
130+ ' </nav>'
131131});
132132```
133-
0 commit comments