3-level router props passed

HTML

<script src="https://cdn.jsdelivr.net/vue/1.0.24/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/0.7.10/vue-router.min.js"></script>
<div id="app">
  <h1>Hello App!</h1>
  <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>
  </p>
  <router-view  foo="124"></router-view>
</div>

CSS

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

JavaScript

// define some components
var Foo = Vue.extend({
  props: [
      'foo'],
  template:
    '<div class="foo">' +
      '<h2>This is Foo! {{ foo }}</h2></div>'
})

var Bar = Vue.extend({
    props: {
        room: {
            type: Array,
            default: function(){
                return [];
            }
        }
    },
    template: '<p v-for="v of room" track-by="$index">This is bar!{{ v }} </p>'
})

var Baz = Vue.extend({
    template: '<p>This is baz!</p>'
})

// configure router
var router = new VueRouter()

router.map({
  '/foo': {
    component: Foo,
    // add a subRoutes map under /foo
    subRoutes: {
      '/': {
        // This component will be rendered into Foo's <router-view>
        // when /foo is matched. Using an inline component definition
        // here for convenience.
        component: {
          template: '<p>Default sub view for Foo</p>'
        }
      },
      '/bar': {
        // Bar will be rendered inside Foo's <router-view>
        // when /foo/bar is matched
        component: Bar
      },
      '/baz': {
        // same for Baz, but only when /foo/baz is matched
        component: Baz
      }
    }
  }
})

// start app
var App = Vue.extend({
    data: function(){
        return {
            room: ['Hello', 'World', 'Fuck']
        };
    }
})
router.start(App, '#app')