es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Problema de transición de pantalla en Vue 2 y Vue Router.

05 Aug, 2023 Programación

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>
Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Hay un par de cosas que podrían estar mal con el código proporcionado:

    1. La configuración de ruta en route.js especifica que el componente Main.vue tiene dos vistas con nombre (default y MENU). Sin embargo, en Main.vue, solo se está utilizando una vista con nombre (MENU). Si deseas utilizar también la vista con nombre default, debes agregar una etiqueta <router-view name="default"></router-view> a tu plantilla.

    2. El componente Menus está siendo importado en route.js, pero no se está utilizando en ningún lugar. En Main.vue, tienes una etiqueta <menu></menu>, pero esto no mostrará nada a menos que el componente Menus realmente se esté utilizando.

    Para solucionar estos problemas, podrías intentar hacer los siguientes cambios:

    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
    }
  }
];

    Main.vue

    <template>
  <div>
    <menu></menu> <!-- Renderiza el componente Menus -->
    <router-view name="default"></router-view> <!-- Renderiza la vista con nombre default -->
  </div>
</template>

    Con estos cambios, el componente Menus debería mostrarse correctamente en Main.vue, y la vista con nombre default también debería mostrarse si hay contenido que mostrar.

Comments are closed.