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>

Solution

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>

Comments

[Tony]

It's one thing to miss the <router-view> component from App.vue but the behaviour that displays Yood is in-explicable. I don't understand why it shows one over the other. It shouldn't show anything with the absence of the <router-view> component.

[Tony]

To test a theory, could you remove the @component decorator from this line export default class HelloWorld extends Vue { which currently has it, and place it on top of this line ` export default class Simulator extends Vue {` and see what happens. Check If it displays Hello World.

[Thibault Dumas]

I added it and removed the @Component from HelloWorld component and added it to Simulator. Now on the path / it show the good component, but when I click on my : <router-link to="/simulator">Go to Simulator</router-link> It changes the url but doesn't show the simulator component :(

[Tony]

The @Component should be on both of them, @Thibault Dumas. That defines the component. Sorry, in the comments, I wasn't clear. I wanted you to remove one and change it to the other to test something (without adding the <router-view/> component). I wanted to understand why it was showing anything without the <router-view/>` component.

[Tony]

I am happy to help. Could you please accept my answer ? I also posted something above. I am interested to know why it printed Yooo in the first place. It shouldn't have without the router-view component.