Primera vez que uso vue3. Intento enrutar un botón desde mi página de inicio a la página de inicio de sesión. Configuré todo de acuerdo con el tutorial, la documentación oficial, sin embargo, no funciona.

¿Alguien puede decirme en qué parte me equivoqué?

Esto es main.js

 import { createApp } from 'vue' import App from './App.vue' import router from './router/index' createApp(App).use(router).mount('#app')

Este es index.js del enrutador

 import { createRouter, createWebHashHistory } from 'vue-router' import Login from '../components/User/Login'; import Landing from '../components/Landing'; const routes = [ { path: '/', name: 'Landing', component: Landing }, { path: '/login', name: 'Login', component: Login } ] const router = createRouter({ history: createWebHashHistory(), routes, }) export default router

Esto es App.vue

 <template> <Landing></Landing> </template> <script> import Landing from "@/components/Landing"; export default { name: 'App', components: { Landing } } </script>

Esto es Landing.vue

 <template> <div class="bg"></div> <div class="bg-text"> <h1>Let's Start! :)</h1> <button class="signup-button">Join Us!</button> <button class="login-button" @click="login">Part of the Community?</button> </div> </template> <script> export default { name: "Landing", methods: { login(){ console.log(`Router: ${this.$router}`) this.$router.push({ path: 'login' }) } } } </script> <style scoped> @import "../assets/css/landing.css"; </style>

Esto es Login.vue excepto la plantilla larga

 <script> console.log("Reaching Login!") export default { name: "Login" } </script> <style scoped> @import "../../assets/css/login.css"; </style>

Sigo la forma programática del enrutador en la documentación oficial. Entonces no tengo el router-link en los componentes.

Espero que cuando haga clic en el botón en la página de destino, se dirigirá a la página de inicio de sesión.

Sin embargo, no lo es. Desde la consola puedo ver que el enrutador existe con [Object] .

¿Puedo saber en qué parte de esto me equivoqué?

¡Gracias!