Vue breadcrumb

HTML

<script src="https://unpkg.com/[email protected]/dist/vue-router.js"></script>
<div id="app">
  <nav>
    <ul>
      <li>
        <router-link to="/">
          aller à décrouvrir
        </router-link>
      </li>
      <li>
        <router-link to="/decouvrir/1--sports-collectifs">
          aller à sports collectifs
        </router-link>
      </li>
      <li>
        <router-link to="/decouvrir/1--sports-collectifs/11--football">
          aller à football
        </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="/decouvrir/1--sports-collectifs">
            	go to types
            </router-link>
         	</div>
        `
      }
    },
    {
    	name: 'activities',
      path: '/decouvrir/(.*/(.*)?',
      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>
  `
})

router.beforeEach((to, from, next) => {
	console.log(to)
  next()
})

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