Vue breadcrumb

by darkylmnx

HTML

<script src="https://unpkg.com/[email protected]/dist/vue-router.js"></script>
<div id="app">
  <nav>
    <ul>
      <li>
        <router-link :to="{name: 'activities', params: {a: 'sports-collectifs'}}">
          aller à sports collectifs
        </router-link>
      </li>
      <li>
        <router-link :to="{name: 'activities', params: {
          a: 'sports-collectifs',
          b: 'football'
        }}">
          aller à football
        </router-link>
      </li>
      <li>
        <router-link :to="{name: 'activities', params: {
          a: 'sports-collectifs',
          b: 'football',
          c: 'entrainement'
        }}">
          aller à entrainement
        </router-link>
      </li>
    </ul>
  </nav>
  <section>
    <h1>Mon site</h1>
 
    <router-view></router-view>
  </section>
</div>

CSS

#app {
  padding: 10px;
  margin: 20px 40px;
  background: pink;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}

Vue

const router = new VueRouter({
	routes: [
  	{
    	name: 'home',
      path: '/',
      component: {
      	template: `
        	<div>
          	home page.
            <router-link :to="{name: 'types', params: {a: 'sports'}}">
            	go to types
            </router-link>
         	</div>
        `
      }
    },
    {
    	name: 'activities',
      path: '/decouvrir/:a/:b?/:c?',
      component: {
      	template: `
        	<div>
          	<fil-ariel />
            coucou toi
          </div>
        `
      }
    }
  ]
})

Vue.component('fil-ariel', {
	template: `
  	<ul>
      <li v-for="(link, key) in $route.params">
        {{ link }}
      </li>
    </ul>
  `
})

new Vue({
	el: "#app",
	router
})