Very simple Vue breadcrumbs in 40 lines of code

vs-crumbs

Works with multi-level paths without the need for child views. For example: "/foo/bar" and "/foo/boo" or even "/foo/:id" can all be used at the same level with a single router-view. Supports child views too.

View demo Github

Props

root - name of the root element, default is 'home'

Usage

Simply add 'vs-crumbs.js' file into your project and insert one or more tags anywhere:

<vs-crumbs></vs-crumbs>

Then style your separator:

.vs-crumbs a:after{ padding: 0 12px; color: #888; content: "/"; }

By default, the component uses router path to display breadcrumb names.

You can override this with custom names by using meta.crumbs:

{ path: '/foo/bar', component: FooBar, meta: { crumbs: '/My Foo/My Bar'} }

This component also sets page title to "home : foo : bar".

See the "test/index.html" file for more examples of how to use it.