VueTyped - VueRouter Example #2

<!DOCTYPE html>
<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.39/system.js"></script>
  <script src="config.js"></script>
  <script>
    System.import('app').catch(console.error.bind(console));
  </script>
</head>

<body>
  <h2>VueTyped - VueRouter Example #2</h2>
  <div id="app">
    
  </div>
</body>

</html>

System.config({
  defaultJSExtensions: true,
  transpiler: 'typescript',
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  map: {
    'typescript': 'https://raw.githubusercontent.com/Microsoft/TypeScript/master/lib/typescript.js',
    'vue': 'https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.min.js',
    'vue-router': 'https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.0.1/vue-router.min.js',
    'vue-typed': 'https://cdn.rawgit.com/vue-typed/vue-typed/dev/index.js'
  },
  packages: {
    app: {
      main: 'index.ts',
      defaultExtension: 'ts',
      format: 'esm'
    }
  }
});

import Vue from 'vue'
import VueRouter from 'vue-router'
import { Component } from 'vue-typed'
import { Foo } from './pages/foo'
import { Bar } from './pages/bar'

Vue.use(VueRouter)

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

const router = new VueRouter({
  routes // short for routes: routes
})

@Component({
  template: `<div>
    <h1>Hello App!</h1>
    <p>
      <router-link to="/foo">Go to Foo</router-link>
      <router-link to="/bar">Go to Bar</router-link>
    </p>
    <router-view></router-view>
  </div>`,
  router  // short for route: route
})
class App { }

new App().$mount('#app')

import { Component } from 'vue-typed'

@Component({template: '<div>foo</div>'})
export class Foo {
  
}

import { Component } from 'vue-typed'

@Component({template: '<div>bar</div>'})
export class Bar {
  
}