¿Existe alguna manera de tener rutas/componentes dinámicos en el enrutador de Vuejs?

¡Hola hermosos desarrolladores de Vuejs!
Tengo un pequeño problema con el enrutamiento de muchos componentes / páginas de Vue dinámicamente. En este escenario, estoy utilizando rutas anidadas para tener un par de rutas para mis componentes de diseño y cientos de rutas secundarias para mis páginas, y como puedes imaginar, tendré que escribir muchas rutas secundarias estáticamente o manualmente, y luego agregar más cuando necesite más rutas secundarias en futuros cambios de código, pero necesito una solución para simplificar / resolver este problema de una manera más eficiente / mejor, como agregar esas rutas a partir de lo que el usuario escribe después del diseño en la url… Aquí está mi ejemplo de código:

“`const routes: RouteRecordRaw[] = [
{
{
path: '/student',
component: () => import('layouts/StudentLayout.vue'),
children: [
{
path: 'dashboard',
component: () => import('pages/student/Dashboard.vue'),
},
{
path: 'profile',
component: () => import('pages/student/Profile.vue'),
},
],
},
}

<pre><code><br />Como puede ver en este código, tengo un diseño llamado Estudiante y tiene dos hijos, pero tendré que escribir manualmente cientos de rutas secundarias para este diseño y otros diseños. ¿Hay alguna manera de configurar dinámicamente esas rutas con lo que los usuarios ingresan después del nombre del diseño, como /estudiante/dashboard o /diseño/página y hacer coincidir con el nombre del componente? Me refiero a los parámetros en Angular, ¿puedo usar el valor del parámetro en el router para decir?
</code></pre>

{
path: ':nombrePagina',
component: (nombrePagina) => import('pages/student/' + nombrePagina + '.vue'),
},
“`

Háganme saber si hay una manera eficiente de resolver este problema.
¡Gracias de antemano!

davy.ai

May 29, 2023 at 8:29 pm

Solución para enrutamiento dinámico de componentes de Vue

¡Hola a todos los hermosos desarrolladores de Vuejs!

Si tiene un escenario en el que está utilizando rutas anidadas para mostrar muchos componentes/páginas de Vue y encuentra que es tedioso escribir manualmente las rutas secundarias, puede simplificar el proceso agregando rutas dinámicamente según lo que el usuario ingrese después del nombre del diseño en la URL. Esta solución es similar a usar parámetros en Angular.

Aquí hay un ejemplo de cómo puede configurar dinámicamente las rutas con Vue.js:

Modifique su código de ruta para incluir un parámetro dinámico para el nombre de la página:

const routes: RouteRecordRaw[] = [
 {
   path: '/:layoutName/:pageName',
   component: () => import ('layouts/:layoutName.vue'),
 },
];

En su componente, use el parámetro del nombre de la página para importar dinámicamente el componente apropiado:

<template>
 <componente :es="componenteNombre"></componente>
</template>

<script>
exportado por defecto {
 calculado: {
   componentName() {
     return () => import(`pages/${this.$route.params.pageName}.vue`);
   },
 },
};
</script>

De esta manera, simplemente puede agregar un nuevo componente de página a su directorio de páginas y el enrutador lo recogerá automáticamente. ¡No se requiere entrada manual de rutas!

Espero que esto ayude a simplificar su situación de enrutamiento. ¡Feliz codificación!

Answer

davy.ai

May 29, 2023 at 8:29 pm
Solución para enrutamiento dinámico de componentes de Vue

¡Hola a todos los hermosos desarrolladores de Vuejs!

Si tiene un escenario en el que está utilizando rutas anidadas para mostrar muchos componentes/páginas de Vue y encuentra que es tedioso escribir manualmente las rutas secundarias, puede simplificar el proceso agregando rutas dinámicamente según lo que el usuario ingrese después del nombre del diseño en la URL. Esta solución es similar a usar parámetros en Angular.

Aquí hay un ejemplo de cómo puede configurar dinámicamente las rutas con Vue.js:
1. Modifique su código de ruta para incluir un parámetro dinámico para el nombre de la página:
```
const routes: RouteRecordRaw[] = [
 {
   path: '/:layoutName/:pageName',
   component: () => import ('layouts/:layoutName.vue'),
 },
];
```
2. En su componente, use el parámetro del nombre de la página para importar dinámicamente el componente apropiado:
```
<template>
 <componente :es="componenteNombre"></componente>
</template>

<script>
exportado por defecto {
 calculado: {
   componentName() {
     return () => import(`pages/${this.$route.params.pageName}.vue`);
   },
 },
};
</script>
```
De esta manera, simplemente puede agregar un nuevo componente de página a su directorio de páginas y el enrutador lo recogerá automáticamente. ¡No se requiere entrada manual de rutas!

Espero que esto ayude a simplificar su situación de enrutamiento. ¡Feliz codificación!

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

¿Existe alguna manera de tener rutas/componentes dinámicos en el enrutador de Vuejs?

Answer

davy.ai