Cómo hacer enrutamiento dinámico en el proyecto Vue
Las formas de implementar el enrutamiento dinámico en proyectos de Vue se pueden dividir aproximadamente en dos tipos:
Escriba el enrutamiento en la interfaz y muestre el enrutamiento dinámicamente de acuerdo con los permisos de rol del usuario. al iniciar sesión (enrutamiento de control frontal)
Para obtener más información, consulte el proyecto de Big Brother in Flower Pants. Te enseñaré paso a paso...
El backend pasa la tabla de enrutamiento correspondiente a los permisos del usuario actual y el frontend la obtiene a través de la interfaz de ajuste (el backend procesa el enrutamiento)
Ambos métodos tienen sus propias ventajas. El efecto se puede lograr a través del segundo método. La razón es que hay un centro de usuarios especial en el proyecto de la empresa. Es difícil regresar al front-end para otorgar permisos al usuario. Preocupación por el enrutamiento al front-end no es seguro (arriba). El front-end no es seguro (las palabras anteriores las dicen compañeros del back-end de la empresa), bueno, con la actitud de intentar ejercitar nuestras habilidades tanto como sea posible, hemos desarrollado un segundo método.
Pasos generales: interceptar enrutamiento-gt; obtener enrutamiento en segundo plano-gt guardar enrutamiento en localStorage (el usuario solo obtendrá la ruta una vez del fondo al iniciar sesión, y el resto se obtendrá de el local, por lo que el usuario solo obtendrá la ruta cuando cierre la sesión)
Nombre del menú menName
Ruta del menú menPath
el menú apunta a; la URL del menú del recurso (es decir, la dirección del componente, generalmente escrita desde la capa de vista)
Obtenga datos del menú a través de la solicitud de interfaz al iniciar sesión en el front-end
menName ---gt ; nombre
menPath ---gt; ruta
menuUrl ----gt;archivo de componentes
Utilice este método para buscar recursos de componentes al realizar la conversión. menuUrl se puede cambiar al formato de componente y convertir a archivo de componente
Generar tabla de enrutamiento
Puede filtrar la tabla de enrutamiento generada nuevamente
El siguiente método puede encontrar la vea todos los recursos de los componentes a continuación.
Si el componente enrutado en la tabla de enrutamiento no se encuentra en todos los recursos del componente, cambie la ruta de enrutamiento a /404
getRouter.push({ ruta: '*', redirigir : '/404', oculto: verdadero });
router.addRoutes(getRouter); //Agregar rutas dinámicamente
Trabajo preliminar: configurar archivos de enrutamiento del proyecto sin enrutamiento o con Una parte de las rutas públicas, es decir, rutas sin permiso
Cada ruta se utiliza en el diseño del componente, que es el diseño general de la página: barra de menú izquierda
Cada ruta utiliza el diseño de componentes, que es el diseño general de la página: barra de menú izquierda, página derecha, por lo que las subrutas debajo de la ruta de primer nivel son páginas desarrolladas por usted. El meta contiene el nombre de la ruta. el nombre de la ruta.
Dado que puede haber menús de varios niveles, habrá subrutas anidadas en las subrutas.
Las rutas existen en forma de; arrays
Los componentes front-end realmente requeridos son componentes.
El componente de front-end realmente requerido es el componente: () =gt; import('@/views/content/classify'),
Dado que hay enrutamiento de varios niveles, debe escribirse como un iterativo. método recursivo, asegúrese de convertir cada componente en un objeto de componente
Dado que el backend devuelve una cadena, debe encapsular el proceso de carga del componente en un método utilizado en el recorrido, consulte _import_development.js y _; archivo import_production.js para más detalles
Puse el diseño en un directorio diferente al de los otros archivos, así que no estoy seguro de lo que estoy haciendo en el recorrido. Es diferente, por lo que lo manejé por separado al atravesar. Los amigos pueden ajustarlo ellos mismos
antes de cada intercepción de ruta e ingresar el juicio. Si se descubre que no hay datos de enrutamiento local, use el fondo de axios para buscarlos una vez. Después de eso, use localStorage para almacenar y use addRoutes para agregar rutas dinámicamente
ps: beforeEach es bueno o malo, tenga cuidado de caer en su bucle infinito. Juzgue al principio para obtener Enrutamiento, directamente a continuación (), llame a
global. antRouter pasa los datos al componente de menú de la izquierda para renderizar
El tercer paso anterior le da a global.antRouter una variable global (se puede reemplazar con vuex), y el lado del menú obtiene la ruta y renderizap>