How to use routes in Vue.js (typescript)

Question

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 src/router/index.ts (showed below), i go to localhost:8080 to see my beautiful Helloworld.vue component, and I see the content of my Simulator.vue that is "Yooood".

How can it be possible ? Since the basepath of my app accessing by "/" is the HelloWorld.vue component, with only a "Hello World" text...

When i'm trying to access the /simulator using a <router-link to="/simulator">Go to Simulator</router-link> I got the same content...

I am a bit confused.... This is my files below.

router/index.ts

import Vue from 'vue'
import VueRouter, { RouteConfig } from 'vue-router'
import Home from '../views/Home.vue'
import Simulator from "@/components/Simulator.vue";
import HelloWorld from "@/components/HelloWorld.vue";

Vue.use(VueRouter);

const routes: Array<RouteConfig> = [
  {
    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

So this is my Simulator.vue :

    <template>
        <div class="hello">
            Yooood
        </div>
    </template>
    
    <script lang="ts">
        import {Vue} from "vue-property-decorator";
    
        export default class Simulator extends Vue {
    
            mounted() {
                console.log('mounted');
            }
        }
    </script>
    
    <style scoped>
    
    </style>

And my HelloWorld.vue

    <template>
      <p>
        Hello World
      </p>
    </template>
    
    <script lang="ts">
    import { Component, Prop, Vue } from 'vue-property-decorator';
    
    @Component
    export default class HelloWorld extends Vue {
      @Prop() private msg!: string;
    }
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    h3 {
      margin: 40px 0 0;
    }
    ul {
      list-style-type: none;
      padding: 0;
    }
    li {
      display: inline-block;
      margin: 0 10px;
    }
    a {
      color: #42b983;
    }
    </style>

My App.vue

    <template>
      <div id="app">
      </div>
    </template>
    
    <script lang="ts">
    import {Vue } from 'vue-property-decorator';
    
    export default class App extends Vue {}
    </script>
    
    <style>
    #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;
    }
    </style>

Answer 1

You are missing the router-view component. According to the vue-router documentation,

The <router-view> component is a functional component that renders the matched component for the given path

APP.vue

<template>
  <div id="app">
    <router-view></router-view> // add router view component
  </div>
</template>