Vue Breadcrumbs

example vue

by oktaviardi pratama

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.17/vue.js "></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/0.7.11/vue-router.js"></script>
<div id="app">
  <h1>Hello App!</h1>
  <p>Breadcrumbs: {{ breadcrumbs.join(' > ') }}</p>
  {{breadcrumbs}}
  <p>
    <a v-link="{ path: '/foo' }">Go to /foo</a>
    <a v-link="{ path: '/foo/bar' }">Go to /foo/bar</a>
    <a v-link="{ path: '/foo/baz' }">Go to /foo/baz</a>
    <a v-link="{ path: '/bat/qux' }">Go to /bat/qux</a>
  </p>
  <router-view></router-view>
</div>

CSS

.v-link-active-exact {
    color: red;
}

JavaScript

Vue.config.debug = true

// global object to store all added breadcrumbs
breadcrumbsData = ['Main']

//Mixin for breadcrumbs
var breadcrumbsMixin = {
  methods: {
    setBreadcrumb: function(text) {
		Vue.set(breadcrumbsData, this._breadcrumbIndex, text)
	}
  },
  route: {
    activate: function (transition) {
    	this._breadcrumbIndex = breadcrumbsData.length
        breadcrumbsData.length++
        console.log('activate')
        transition.next()
    },
  	deactivate: function (transition) {
        breadcrumbsData.splice(this._breadcrumbIndex, 1)
        console.log('deactivate')
    	transition.next()
    }
  }
}

// define some components
var Foo = Vue.extend({
  data: function () {
  	return {
      	val: 0
    }
  },
  ready: function () {
  	this.setBreadcrumb(this.val)
  },
  mixins: [breadcrumbsMixin],
  template:
    '<div class="foo">' +
      '<h2>This is Foo!</h2>' +
      '<router-view></router-view>' + // <- nested outlet
    '</div>' +
    '<button type="button" v-on:click="setBreadcrumb(val++)">'+
      'Foo va++' +
    '</button>'
})

// define some components
var Bat = Vue.extend({
  ready: function () {
  	this.setBreadcrumb('Bat')
  },
  mixins: [breadcrumbsMixin],
  template:
    '<div class="foo">' +
      '<h2>This is Bat!</h2>' +
      '<router-view></router-view>' + // <- nested outlet
    '</div>'
})

var Bar = Vue.extend({
    ready: function () {
  		this.setBreadcrumb('Bar in Foo')
  	},
    mixins: [breadcrumbsMixin],
    template: '<p>This is bar!</p>'
})

var Baz = Vue.extend({
    ready: function () {
  		this.setBreadcrumb('Baz in Foo')
  	},
    mixins: [breadcrumbsMixin],
    template: '<p>This is baz!</p>'
})

var Qux = Vue.extend({
    ready: function () {
  		this.setBreadcrumb('Qux in Bat')
  	},
    mixins: [breadcrumbsMixin],
    template: '<p>This is qux!</p>'
})


// configure router
var router = new VueRouter()

router.map({
  '/foo': {
    component: Foo,
    // add a subRoutes map under /foo
    subRoutes: {
    ...