tutorial - vue router example laravel

¿Cuál es la mejor práctica de Vue-Router para aplicaciones web muy grandes?

Question

Tengo que hacer una aplicación web con muchos módulos diferentes (como un módulo de tareas, módulos de documentos y un gran módulo de gestión de usuarios para usuarios de administración). El número total de páginas es> 100. Y el acceso al módulo es diferente para cada usuario.

Estoy trabajando con Laravel y Vue-router .

¿Pero cuál es la mejor práctica para hacerlo?

1. ¿Crear una aplicación SPA, con 1 enrutador vue grande para todo?
2. ¿Para cada módulo un "SPA" propio (con y un enrutador de vue)?
3. ¿O otra sugerencia ...?

Answer 1

Nuxt puede ayudarte con eso. Genera su carpeta Structur dinámicamente a un archivo de configuración de enrutador. Echa un vistazo a https://nuxtjs.org/guide/routing

Tiene incluso más funciones de ayuda que el enrutamiento. Pero especialmente para grandes aplicaciones en general, una idea para configurar en nuxt

Answer 2

Poco tarde pero trataré de responder la pregunta. Esta es más una pregunta de arquitectura que una pregunta de nivel de enrutamiento.

TLDR: Necesitarás una mezcla de enfoques. Un enfoque no encaja.

1. Modo de enrutamiento

Primero, debe determinar si va a usar el modo de historial HTML 5 o el modo hash. Es 2018, y definitivamente recomiendo que use el modo de historial HTML5.

Si usa el modo historial, significa que su enrutador del lado del cliente tendrá que trabajar en sincronización con el enrutador del lado del servidor.

2. Micro-frontends

No estoy seguro de si lo sabe, pero micro-frontends es el término que está buscando. Básicamente, es su primera línea de segregación. Debes dividir tu aplicación en múltiples aplicaciones más pequeñas. Cada aplicación tendrá su componente raíz, enrutador , modelos, servicios, etc. Usted compartirá muchos de los componentes (Por supuesto, una aplicación muy grande es importante. Y literalmente lo digo).

3. Consideraciones mono-repo.

Si ha elegido seguir adelante con Micro-frontends, entonces podría considerar la configuración mono-repo utilizando Lerna o Builder.

4. Módulo de enrutamiento - Inicialización

Independientemente de las micro-aplicaciones, su aplicación debe tener un punto de partida: main.js o index.js . En este archivo, debes inicializar todas tus cosas singleton. Las principales entidades singleton en una aplicación típica de Vue.js son Root Component , Data Store , Router , etc.

Su módulo de enrutamiento estará separado de cualquier componente. Importe el módulo de enrutamiento en este archivo de entrada e inicialícelo aquí.

5. Módulo de enrutamiento - Implementación

El módulo de enrutamiento debe dividirse en módulos más pequeños. Usa funciones simples y módulos ES para hacer eso. Cada función será responsable de devolver un objeto RouteConfig . Así es como se verá:

const route: RouteConfig = {
path: ''/some-path'',
component: AppComponent,
children: [
getWelcomeRoute(),
getDashboardRoute()
]
};
function getWelcomeRoute(): RouteConfig {
return {
name: ROUTE_WELCOME,
path: '''',
component: WelcomeComponent
};
}

En el nivel de ruta, debe considerar realizar una carga lenta de los módulos. Esto evitará que muchos bytes se carguen por adelantado:

function getLazyWelcomeRoute(): RouteConfig {
// IMPORTANT for lazy loading
const LazyWelcomeComponent = () => import(''views/WelcomeComponent.vue'');
return {
name: ROUTE_WELCOME,
path: '''',
component: LazyWelcomeComponent
};
}

No puedes hacer esto a menos que uses un empaquetador como Webpack o Rollup.

5. Módulo de enrutamiento - Guardia

Esto es muy importante. Los guardias son los que deben manejar su autorización. Con Vue.js, es posible escribir protección de ruta a nivel de componente. Pero mi sugerencia es abstenerse de hacerlo . Hazlo solo cuando sea absolutamente necesario. Es básicamente una separación de preocupación. Su módulo de enrutamiento debe poseer el conocimiento de la autorización de su aplicación. Y técnicamente, la autorización existe / se aplica a una ruta que a un componente. Esa es la razón por la que creamos el enrutamiento como un módulo separado por completo.

Supongo que está utilizando algún tipo de almacén de datos como Redux o Vuex para la aplicación muy grande. Si va a escribir guardas de nivel de ruta, entonces deberá consultar con los datos de la tienda Redux / Vuex para tomar decisiones de autorización. Esto significa que necesita inyectar la tienda en el módulo de enrutamiento. La forma más sencilla de hacerlo es envolver la inicialización de su enrutador en una función como esta:

export function makeRouter(store: Store<AppState>): VueRouter {
// Now you can access store here
return new VueRouter({
mode: ''history'',
routes: [
getWelcomeRoute(store),
]
});
}

Ahora simplemente puede llamar a esta función desde su archivo de punto de entrada.

6. Módulo de enrutamiento - Ruta predeterminada

Recuerde definir una ruta predeterminada para mostrar todos los mensajes 404 genéricos / inteligentes a sus usuarios.

7. Módulo de enrutamiento - Datos de enrutamiento

Ya que realmente estamos hablando de aplicaciones muy grandes , es mejor evitar el acceso directo a un enrutador dentro de su componente. En su lugar, mantenga los datos de su enrutador sincronizados con su almacén de datos como vuex-router-sync . Guardarás la dolorosa cantidad de errores haciendo esto.

8. Módulo de enrutamiento - efectos secundarios

A menudo utilizará $router.replace() o $router.push() dentro de sus componentes. Desde una perspectiva componente, es un efecto secundario. En su lugar, maneje la navegación programática del enrutador fuera de su componente. Crear un lugar central para todos los enrutadores de navegación. Envíe una solicitud / acción a esta entidad externa para manejar estos efectos secundarios por usted. TLDR; No realice efectos secundarios de enrutamiento directamente dentro de sus componentes. Hará que sus componentes sean SÓLIDOS y fáciles de probar. En nuestro caso, usamos redux-observable para manejar los efectos secundarios del enrutamiento.

Espero que esto cubra todos los aspectos del enrutamiento para una aplicación a gran escala.

Answer 3

Si va con la aplicación SPA, asegúrese de estar usando estas prácticas:

1. Carga perezosa / componentes asíncronos. Por lo general, hacemos la carga perezosa para los activos estáticos. En el mismo sentido, solo necesitamos cargar los componentes cuando se visitan las rutas. Vue solo activará la función de fábrica cuando el componente necesita ser procesado y almacenará el resultado en caché para futuras repeticiones.

import MainPage from ''./routes/MainPage.vue''
const Page1 = r => require.ensure([], () => r(require(''./routes/Page1.vue'')))
const routes = [
{ path: ''/main'', component: MainPage },
{ path: ''/page1'', component: Page1 }
]

2. Combinación de rutas: (relacionado con lo anterior) Por ejemplo, en el siguiente caso, se emiten 2 rutas en el mismo fragmento y paquete, lo que hace que el paquete se cargue de forma perezosa cuando se accede a cualquiera de las rutas.

const Page1 = r => require.ensure([], () => r(require(''./routes/Page1.vue'')), ''big-pages'')
const Page2 = r => require.ensure([], () => r(require(''./routes/Page2.vue'')), ''big-pages'')