Vue-router: do i need to define the default route for vue-router

Question

Experimenting with vue-router, when i click on <router-link to="/about">Go to About</router-link> it doesnt redirect me to anywhere so for example: if i was on localhost:8080/#/ and i click the Go to About button, i still remain on localhost:8080/#/ . Also if i change the url directly to localhost:8080/#/about nothing happens (ie no change to the website as if i am still on localhost:8080/#/ )

The code:

/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [
  {
    path: '/about',
    component: () => {
      import ('../views/About.vue');
    }
  }
]

const router = new VueRouter({
  routes
})

export default router;

./App.vue

<template>
   <div>
      <div id='nav'>
        <router-link to="/about">Go to Foo</router-link>
      </div>
      <router-view></router-view>
   </div>
</template>
<script>
export default {
  name: 'App',

  components: {
    //
  },

  data: () => ({
    //
  }),
};
</script>

./views/About.vue

<template>
  <p>Testing out vue-routes</p>
</template>

./main.js

import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';
import store from './store';
import router from './router';

Vue.config.productionTip = false;


new Vue({
  vuetify,
  store,
  router,
  render: h => h(App)
}).$mount('#app')

I tried running the following code. it gave no error on serving. (I am also using vuetify and vuex but i dont think that is the problem?)

---

EDIT

I have edited the code such that it works by creating another vue app and using the default that vue has provided with but i cant seem to understand why the edited code works and why the previous code ^^ above didnt. It seems like the reason was that the default localhost:8080/#/ needs to have its own route in ./App.vue as well and is not there by default? can someone confirm this (can't seem to find something like this explanation online?)

Revised working code:

./App.vue

<template>
  <div id="app">
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div>
  <router-view />
</div>
</template>

./views/Home.vue

<template>
<h1>This is the home page</h1>
</template>
<script>
export default {
  name: 'Home',

  components: {
    //
  },

  data: () => ({
    //
  }),
};
</script>

./main.js

import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';
import store from './store';
import router from './router';

Vue.config.productionTip = false;


new Vue({
  vuetify,
  store,
  router,
  render: h => h(App)
}).$mount('#app')

./router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router';
import Home from "../views/Home.vue";

Vue.use(VueRouter);
const routes = [
  {
    path: "/",
    name: "Home",
    component: Home
  },
  {
    path: "/about",
    name: "About",
    component: () =>
      import("../views/About.vue")
  }
];

const router = new VueRouter({
  routes
})

export default router;

./views/About.vue

<template>
  <p>Testing out vue-routes</p>
</template>

Answer 1

You need to have a <router-view/> where the routes are going to resolve.

You can read more about it here: documentation