title: How to use routes in Vue.js (typescript)
body: <p>I juste started a new project with Vue.js, long time I didn't use it, it changed a lot.
  Tried to add a route in my <code>src/router/index.ts</code> (showed below), i go to localhost:8080 to see my beautiful <code>Helloworld.vue</code> component, and I see the content of my <code>Simulator.vue</code> that is &quot;Yooood&quot;.</p>
  <p>How can it be possible ? Since the basepath of my app accessing by &quot;/&quot; is the HelloWorld.vue component, with only a &quot;Hello World&quot; text...</p>
  <p>When i'm trying to access the <code>/simulator</code> using a <code>&lt;router-link to=&quot;/simulator&quot;&gt;Go to Simulator&lt;/router-link&gt;</code> I got the same content...</p>
  <p>I am a bit confused.... This is my files below.</p>
  <p>router/index.ts</p>
  <pre class="lang-ts prettyprint-override"><code>import Vue from 'vue'
  import VueRouter, { RouteConfig } from 'vue-router'
  import Home from '../views/Home.vue'
  import Simulator from &quot;@/components/Simulator.vue&quot;;
  import HelloWorld from &quot;@/components/HelloWorld.vue&quot;;
  
  Vue.use(VueRouter);
  
  const routes: Array&lt;RouteConfig&gt; = [
    {
      path: '/',
      name: 'Home',
      component: HelloWorld
    },
    {
      path: '/simulator',
      name: 'Simulator',
      component: Simulator
    }
  ]
  
  const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
  })
  
  export default router
  </code></pre>
  <p>So this is my Simulator.vue :</p>
  <pre class="lang-html prettyprint-override"><code>    &lt;template&gt;
          &lt;div class=&quot;hello&quot;&gt;
              Yooood
          &lt;/div&gt;
      &lt;/template&gt;
      
      &lt;script lang=&quot;ts&quot;&gt;
          import {Vue} from &quot;vue-property-decorator&quot;;
      
          export default class Simulator extends Vue {
      
              mounted() {
                  console.log('mounted');
              }
          }
      &lt;/script&gt;
      
      &lt;style scoped&gt;
      
      &lt;/style&gt;
  </code></pre>
  <p>And my HelloWorld.vue</p>
  <pre class="lang-html prettyprint-override"><code>    &lt;template&gt;
        &lt;p&gt;
          Hello World
        &lt;/p&gt;
      &lt;/template&gt;
      
      &lt;script lang=&quot;ts&quot;&gt;
      import { Component, Prop, Vue } from 'vue-property-decorator';
      
      @Component
      export default class HelloWorld extends Vue {
        @Prop() private msg!: string;
      }
      &lt;/script&gt;
      
      &lt;!-- Add &quot;scoped&quot; attribute to limit CSS to this component only --&gt;
      &lt;style scoped&gt;
      h3 {
        margin: 40px 0 0;
      }
      ul {
        list-style-type: none;
        padding: 0;
      }
      li {
        display: inline-block;
        margin: 0 10px;
      }
      a {
        color: #42b983;
      }
      &lt;/style&gt;
  </code></pre>
  <p>My App.vue</p>
  <pre class="lang-html prettyprint-override"><code>    &lt;template&gt;
        &lt;div id=&quot;app&quot;&gt;
        &lt;/div&gt;
      &lt;/template&gt;
      
      &lt;script lang=&quot;ts&quot;&gt;
      import {Vue } from 'vue-property-decorator';
      
      export default class App extends Vue {}
      &lt;/script&gt;
      
      &lt;style&gt;
      #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
      }
      &lt;/style&gt;
  </code></pre>