Vuejs routes doesn't work?

Question

Somehow my routes doesn't work? I have seen so many videos about routing in vuejs. And all others do it that way. Is it a bug or what can i do ?

Menu.vue:

<template>
<div class="Menu">
<div class="div" style="margin-top:70px;">
<header class="main-header">
<nav class="main-nav">
<ul class="nav-links">

<router-link to="/"><img id="logo" src="assets/Vue.js_Logo.png"></router-link>
<h2 class="nav-link" style="color:white;">Vue.js</h2>
<router-link class="nav-link" tag="li" to="/"><a>Home</a></router-link>
<router-link class="nav-link" tag="li" to="/info"><a>Info</a></router-link>
<router-link class="nav-link" tag="li" to="/ITkompetencer"><a>IT Kompentencer</a></router-link>
<router-link class="nav-link" tag="li" to="/about"><a>Om mig</a></router-link>

</ul>
</nav>
</header>
</div>
</template>
<script>
export default {
   name: 'Menu'
}
</script>

app.vue:

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

<script>
import Menu from './components/Menu'
import Hello from './components/Hello'
export default {
name: 'App',
components: {
Hello,
Menu
}
}
</script>

I hope there are so genius guys out there :)

Answer 1

First, You need define these routes in main.js

// entry file: main.js or app.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'
import Hello from './components/Hello'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    // the home page
    { path: '/', component: Hello }
  ]
})

new Vue({
  router,
  render: h => h(App), // the layout
})

It's easy: https://router.vuejs.org/guide/