router-app.html

<script src="https://npmcdn.com/vue@next/dist/vue.js"></script>
<script src="https://npmcdn.com/vue-router@next"></script>
<style>
.router-link-active {
  color: red;
}
</style>

<div id="app">
  <side-bar></side-bar>
  <router-view></router-view>
</div>

<script>
const Home = {
  name: 'Home',
  template: '<div>Home</div>'
}

const mails = [
  { id: 1, title: 'Hello', body: 'Lorem ipsum dolor sit' },
  { id: 2, title: 'Spam', body: 'Foo bar baz' }
]

const api = {
  fetchMails (callback) {
    setTimeout(() => {
      callback(mails)
    }, 100)
  },

  fetchMailById (id, callback) {
    setTimeout(() => {
      mails.some(mail => {
        if (mail.id == id) {
          callback(mail)
          return true
        }
      })
    }, 0)
  }
}

const InboxView = {
  name: 'InboxView',
  data () {
    return { mails: [] }
  },
  created () {
    api.fetchMails(mails => {
      this.mails = mails
    })
  },
  template: `
    <div>
      <h1>Inbox</h1>
      <p v-if="!mails.length">Loading...</p>
      <ul>
        <li v-for="mail in mails">
          <router-link :to="'/mail/' + mail.id">
            {{ mail.title }}
          </router-link>
        </li>
      </ul>
    </div>
  `
}

const MailView = {
  name: 'MailView',
  data () {
    return { mail: null }
  },
  created () {
    api.fetchMailById(this.$route.params.id, mail => {
      this.mail = mail
    })
  },
  template: `
    <div>
      <p v-if="!mail">Loading...</p>
      <div v-else>
        <h2>{{ mail.title }}</h2>
        <p>{{ mail.body }}</p>
      </div>
    </div>
  `
}

const router = new VueRouter({
  // mode: 'history',
  routes: [
    { path: '/', component: Home },
    { path: '/inbox', component: InboxView },
    { path: '/mail/:id', component: MailView }
  ]
})

const SideBar = {
  template: `
    <div>
      I am the sidebar!
      <router-link to="/" exact>Home</router-link>
      <router-link to="/inbox">Inbox</router-link>
    </div>
  `
}

const app = new Vue({
  router,
  components: {
    SideBar
  }
}).$mount('#app')
</script>