vue-router 2 template

Template for vue-router 2

by batcave

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js"></script>
<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<script src="https://npmcdn.com/vue-router/dist/vue-router.js"></script>

<div id="app">

  breadcrumb: <marquee>{{ breadcrumb }}</marquee> <br/>

   <!-- menu -->
  <ul>
    <li v-for="route in topLevelRoutes" :key="route.path">
      <router-link :to="route.path">{{ route.meta.menuTitle }}</router-link>
      <ul v-if="route.children.length > 0">
         <li v-for="childRoute in route.children" :key="childRoute.path">
          <router-link :to="childRoute.path">{{ childRoute.meta.menuTitle }}</router-link>
          </li>
      </ul>
    </li>
  </ul>
  
  <!-- sample detail link -->
  <router-link to="/section/sub/123">details</router-link>
  
  <router-view></router-view>
</div>

Babel + JSX

const Section = { template: '<div>🦎 Section page 🦎</div>' }
const Sub = { template: '<div>🔥 Sub page 🔥</div>' }
const Details = { template: '<div>👀 Details {{ $route.params.id }} 👀</div>' }
const Shoes = { template: '<div>🦎 shoes page 🦎</div>' }
const Nike = { template: '<div>🔥 Nike page 🔥</div>' }
const NikeDetails = { template: '<div>👀 Details {{ $route.params.id }} 👀</div>' }

const routes = [
  {
    path: "/section",
    component: Section,
    meta: { menuTitle: 'Section' },
    children: [
      {
        path: "sub",
        component: Sub,
        meta: { menuTitle: 'Sub page' },
        children: [
          {
            path: ":id",
            component: Details,
            meta: { menuTitle: 'Details', hideFromMenu: true }
          }   
        ]
      }
    ]
  },
  {
    path: "/shoes",
    component: Shoes,
    meta: { menuTitle: 'Shoes' },
    children: [
      {
        path: "nike",
        component: Nike,
        meta: { menuTitle: 'Nike' },
        children: [
          {
            path: ":id",
            component: NikeDetails,
            meta: { menuTitle: 'Details', hideFromMenu: true }
          }   
        ]
      }
    ]
  }
]

function collect(routes, result = [], parent, level = 1) {
  _.forEach(routes, route => {
    route.meta = { ...route.meta, parent, level }
    route.path = parent ? `${parent.path}/${route.path}` : route.path
  	result.unshift(route)
    collect(route.children, result, route, level+1)
  })
  return result
}

const r = collect(routes)
console.log(r)

const router = new VueRouter({
  routes: r
})

new Vue({
	router,
  el: '#app',
  data: {
    msg: 'Hello World'
  },
  computed: {
  	breadcrumb() {
      let result = [this.$route]
      let parent = this.$route.meta.parent
      while(parent) {
        result.unshift(parent)
        parent = _.get(parent, 'meta.parent')
      }
      return _.chain(result).map('meta.menuTitle').join(' > ').value()
    },
    topLevelRoutes() {
      return...