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.

Vue Router cambiar componente renderizado

02 Aug, 2023 Programación

En mi aplicación Vue, quiero incluir una página no autorizada. Por lo tanto, comencé a manipular mi router. Se ve así:

const router = new VueRouter({
    routes: [
        addGuard(<RouteConfigurationView>{
            path: "/somePath/:id",
            name: "someName",
            component: () => import("../pages/MyComponent.vue"),
            hidden: true
        })
     ]
});

function addGuard(route: RouteConfigSingleView): RouteConfigSingleView {
    route.beforeEnter = (to, from, next) => {
        if(to.params.id == 5) { // Solo como ejemplo.
            route.component = () => import("../pages/Unauthorized.vue");
        }
        next();
    };
    return route;
}

Cuando ingreso a la ruta dada, se carga el componente original (MyComponent) y se ignora el cambio. ¿Hay alguna manera en la que se pueda implementar mi caso de uso con las herramientas de Vue?

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Sí, hay una manera de implementar tu caso de uso con las herramientas de Vue. Una opción es utilizar la representación dinámica de componentes. Esto te permite renderizar de forma condicional diferentes componentes basados en ciertas condiciones, como por ejemplo si el usuario está autorizado o no.

    Aquí tienes un ejemplo de implementación utilizando la representación dinámica de componentes:

    <template>
  <div>
    <component :is="componenteARenderizar"></component>
  </div>
</template>

<script>
import MiComponente from "../pages/MiComponente.vue";
import NoAutorizado from "../pages/NoAutorizado.vue";

export default {
  data() {
    return {
      componenteARenderizar: MiComponente,
    };
  },
  created() {
    if (this.$route.params.id == 5) {
      this.componenteARenderizar = NoAutorizado;
    }
  },
};
</script>

    En esta implementación, estamos utilizando el elemento component para renderizar de forma dinámica tanto MiComponente como NoAutorizado dependiendo de si el parámetro id en la ruta es igual a 5. Establecemos el componente inicialmente como MiComponente en la función data y luego utilizamos el gancho de ciclo de vida created para verificar el parámetro de la ruta y actualizar el componente que se está renderizando en consecuencia.

    Esta implementación no requiere ninguna manipulación del enrutador, lo que la hace más flexible y fácil de mantener.

Comments are closed.