Switch branches/tags
Nothing to show
Find file History
Latest commit 8e843b8 Jul 5, 2017
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
test Title fixed. Jul 4, 2017
README.md Minor edits. Jun 9, 2017
example.jpg Screenshot added. Jul 4, 2017
vs-crumbs.js Minor formatting. Jul 1, 2017

README.md

Very simple Vue breadcrumbs in 40 lines of code

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.

Requires: vue-router.

Live Demo

https://nxtchg.github.io/pieces/vue/vs-crumbs/#/foo/bar

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.