Estoy aprendiendo vue. Instalé vue-router por npm install vue-router. Registré VueRouter y definí mi ruta de URL en las instancias de VueRouter en el archivo main.js. Creado Acerca de los componentes y en el componente de archivo app.vue utilizado. Pero la ruta no funciona en http://localhost:8080/about/#/ url o http://localhost:8080/#/about . También traté de eliminar la etiqueta # de la URL. Aquí está el código fuente:

Principal.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')

aplicación.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>

Acerca de.vue

 <template> <div id="about"> <h3>About Page</h3> </div> </template> <script> export default{ name: 'About' } </script>

Paquete.json

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