Vue-router <router-view> does not error but does not render

Question

I am learning Vue and came across a problem. I installed the vue-router via npm. When I call the <router-view>, no error is indicated but the site does not render on the page. If I type the links in the address bar, the contents of the components are loaded.

main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import {routes} from './routes'

Vue.use(VueRouter);

const router = new VueRouter({
  routes
})


new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

Routes.js

import Contato from './components/Contato.vue'
import Sobre from './components/Sobre.vue'
import Home from './components/Home.vue'

export const routes = [
  {path : '', component: Home},
  {path : '/contato', component: Contato},
  {path : '/sobre', component: Sobre}

]

App.

<template>
<div class="" id="app">
  <div class="container">

    <router-view></router-view>

  </div>
</div>
</template>

<script>
export default {

}
</script>

<style lang="sass">
@import "~bulma/sass/utilities/initial-variables.sass"
@import "~bulma"
</style>

Answer 1

The problem is that you forgot to inform the home page ( Component ), we will rewrite this code, follow step by step:

1. Create the file main.js

   import Vue from 'vue'
   import App from './App'
   import router from './router'
   
   Vue.config.productionTip = false
   
   new Vue({
     el: '#app',
     router,
     template: '<App/>',
     components: { App }
   })
   

2. Create the file App.

   <template>
       <div id="app">
           <router-link to="/">/Home</router-link> - 
           <router-link to="/contato">/Contato</router-link>
           <router-view></router-view>
       </div>
   </template>
   
   <script>
       export default {
           name: 'app'
       }
   </script>
   
   <style>
   </style>
   

3. Create the file index js. inside the directory router

   import Vue from 'vue'
   import Router from 'vue-router'
   import Home from '../components/Home'
   import Contato from '../components/Contato'
   
   Vue.use(Router)
   
   export default new Router({
     mode: 'history',
     routes: [
       {
         path: '/',
         name: 'Home',
         component: Home
       },
       {
         path: '/contato',
         name: 'Contato',
         component: Contato
       }
     ]
   })
   

4. Create components within the directory Components

   Component Home.

   <template>
       <div class="home">
           <h1>{{ msg }}</h1>
       </div>
   </template>
   
   <script>
       export default {
       name: 'home',
       data () {
           return {
               msg: 'Página inicial'
           }
       }
   }
   
   </script>
   
   <style scoped>
   </style>
   

   Component Contact.

   <template>
     <div class="contato">
       <h1>{{ msg }}</h1>
     </div>
   </template>
   
   <script>
     export default {
     name: 'contato',
     data () {
       return {
         msg: 'Página de Contato'
       }
     }
   }
   
   </script>
   
   <style scoped>
   </style>
   

You can see running here on codesandbox.