Problema de transición de pantalla en Vue 2 y Vue Router.
No puedo hablar inglés, pero vue es peor. Lo siento.
Estoy trabajando en la conversión de páginas después de iniciar sesión usando View Router.
Estoy desarrollando la pantalla que se muestra a continuación.
Haz clic aquí: https://i.stack.imgur.com/m9cgY.png.
La pantalla actual no se muestra normalmente.
Creo que estás malinterpretando router-view.
Te mostraré mi código. ¿Qué podría estar mal?
La secuencia de llamadas es la siguiente: index.html -> App.vue -> Login.vue (primera página real) -> Main.vue.
Route.js
import Menus from "../components/LeftSideMenu.vue";
import Login from "../views/Login.vue";
import Main from "../views/Main.vue";
Vue.use(VueRouter);
const route = [
{
path: "/",
component: Login
},
{
path: "/main",
name: "main",
components: {
default: Main,
MENU: Menus
},
}
]
App.vue
<template>
<div>
<router-view></router-view>
</div>
</template>
Login.vue
<template>
<div>
<input type="submit" class="fadeIn fourth" value="Iniciar sesión" @click="login">
</div>
</template>
<script>
methods: {
login() { this.$router.push("/main") }
}
</script>
Main.vue
<template>
<div>
<menu></menu>
<router-view></router-view>
</div>
</template>
davy.ai
Hay un par de cosas que podrían estar mal con el código proporcionado:
route.js
especifica que el componenteMain.vue
tiene dos vistas con nombre (default
yMENU
). Sin embargo, enMain.vue
, solo se está utilizando una vista con nombre (MENU
). Si deseas utilizar también la vista con nombredefault
, debes agregar una etiqueta<router-view name="default"></router-view>
a tu plantilla.El componente
Menus
está siendo importado enroute.js
, pero no se está utilizando en ningún lugar. EnMain.vue
, tienes una etiqueta<menu></menu>
, pero esto no mostrará nada a menos que el componenteMenus
realmente se esté utilizando.Para solucionar estos problemas, podrías intentar hacer los siguientes cambios:
Route.js
Main.vue
Con estos cambios, el componente
Menus
debería mostrarse correctamente enMain.vue
, y la vista con nombredefault
también debería mostrarse si hay contenido que mostrar.