I am learning vue. I installed vue-router by npm install vue-router. I registered VueRouter and define my url path in the VueRouter instances in main.js file. Created About components and in the app.vue file component used. But the route is not working in http://localhost:8080/about/#/ url or http://localhost:8080/#/about . I also tried to remove the # tag from the url. Here is the source code:

Main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import About from './components/About';
Vue.use(VueRouter);
const route = [
  {path:'/about',component: About}
];
const router = new VueRouter({
  route
});
Vue.config.productionTip = false

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

App.vue

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

<script>

export default {
  name: 'App',
  components: {
  }
}
</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>

About.vue

<template>
    <div id="about">
        <h3>About Page</h3>
    </div>
</template>

<script>

export default{
    name: 'About'
}
</script>

Package.json

"dependencies": { "core-js": "^3.6.5", "vue": "^2.6.11", "vue-router": "^3.5.2" },