vue.js - ルーター コンポーネントを変更できません

Question

次の.vueファイルがあります

<template>
<div class="container">
<div class="row">
<div class="column">
<h2>Create your MIA</h2>
<p><img src="../../static/intro.gif"/></p>
<p><a v-on:click="go()" href="javascript:void(0)" class="button">Enter</a></p>
</div>
</div>
</div>
</template>
<script>
export default {
  methods: {
    go: function () {
      console.log(this.$router.go)
      this.$router.go({ path: '/app' })
    }
  }
}
</script>

そして、私が持っているメインのindex.htmlファイルに

<main class="container center">
      <div id="logo"></div>
      <div id="section">
        <router-view></router-view>
      </div>
    </main>

そして私のmain.jsで

import Vue from 'vue'
import Resource from 'vue-resource'
import Router from 'vue-router'
import App from './components/app'
import Intro from './components/intro'

Vue.use(Resource)
Vue.use(Router)

const route = new Router({hashbang: false,
    history: true,
    linkActiveClass: 'active',
    mode: 'html5'})

// Pointing routes to the components they should use
route.map({
  '/': {
    component: Intro,
    subRoutes: {
      'app': {
        component: App
      }
    }
  },
  '/app': {
    component: App
  }
})

// Any invalid route will redirect to home
route.redirect({
  '*': '/app'
})

route.start(Intro, '#section')

ものがコンパイルされると、 Introコンポーネントを取得できますが、ボタンをクリックするとハッシュのみが変更され、コンポーネントは変更されません....

ドキュメントに基づいて、私が違うことをしている唯一のことは、プログラムでルートを変更していることです。

ここで何が間違っていますか？