vue router showing blank page

Question

I'm currently building a web application using vue.js for my frontend, during the implementation of my router I don't see any error, but still is not showing anything in any page, clearly I've ensured already that everything is running and without errors, here's what I have:

App.vue

<template>
    <div>
        <router-view></router-view>
    </div>
</template>
<script>
export default {
    name: 'App'
}
</script>

Router.js

import Vue    from 'vue'
import Router from 'vue-router'
import Home    from './components/Home'
import Table   from './components/Table'

Vue.use(Router)

export default new Router({
    routes: [
        {
            path: '/',
            component: Home
        },
        {
            path: '/table',
            component: Table
        },
    ],
    linkActiveClass: "active",
    mode: "hash"
})

main.js

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

new Vue({
    el: '#app',
    router,
    components: { App },
    template: '<App/>'
}) 

And as an example Home.vue

<template>
  <div class="flex flex-wrap -m-3">
      <h1>You're looking at your home</h1>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data () {
      return {}
    }
};
</script>

Any hint or help will be greatly appreciated.

Answer 1

In your sandbox code you doesn't have the same code shown in your answer, so that's the reason to not see the same, but everything is working fine.

If you want to see the table page in your sandbox add this li tag inside one of the ul tags in your sandbox home component:

<li>
  <a
    href="#/table"
  >table</a>
</li>

or

<router-link to="table">Go to Table</router-link>

In your Table.vue component add to go back

<router-link to="/">Go to Home</router-link>