https://www.php.cn/js-tutorial-397246.html
Demanda
Recientemente se hizo cargo de un sistema de gestión de fondo, que necesita lograr el efecto de extraer el menú de navegación del fondo; los menús de navegación extraídos respectivamente son diferentes según los permisos del usuario conectado, y también hay diferencias en la interfaz operable.
El problema
Debido a que el sistema de administración en segundo plano está listo para usar la combinación de vue + vue-router + element-ui + vuex, pero la aplicación de una sola página ha instanciado e inyectado vue-router en la instancia de vue antes de ingresar a la página, así que ingrese No hay forma de volver a personalizar la ruta al iniciar sesión en la página. Luego, todo tipo de Baiguo descubrió que vue-router proporcionaba el método addRoutes en la versión 2.0 para agregar rutas, y apareció el amanecer de la esperanza.
Después de muchos lanzamientos, finalmente me di cuenta de la función, que está grabada para una fácil revisión, y espero ayudar a los compañeros que también tienen necesidades.
Ideas
1. Primero configure una dirección de enrutamiento fija localmente, como inicio de sesión, páginas 404, de la siguiente manera:
Después de configurar estas rutas fijas, solo podemos ir a la página de inicio de sesión, de lo contrario no podemos continuar.
2. Luego, un paso importante, tenemos que estar de acuerdo con el viejo plan de back-end sobre la información de la lista del menú de permisos que debe devolverse, en primer lugar, aquí analizamos la estructura de enrutamiento que necesitamos, y aquí tomamos mi propio enrutamiento como ejemplo. Si defino la ruta directamente por mí mismo, será la siguiente estructura:
De acuerdo con el análisis estructural anterior, las rutas que realmente deben configurarse dinámicamente son en realidad la parte
secundaria debajo / diseño, por lo que el backend debe devolvernos una matriz que contenga todas las rutas. Los datos devueltos son la lista de navegación de primer nivel en la lista raíz. La navegación de primer nivel en realidad no tiene una función de enrutamiento, sino que solo sirve como un disparador para cambiar el menú de segundo nivel. SubList es la información de enrutamiento que realmente necesitamos.
3. Después de obtener la información de enrutamiento de permisos, necesitamos procesar los datos localmente y reunirlos en los datos que necesitamos:
el método de procesamiento de la lista de menú y sublista: mergeSubInRoot y mergeRoutes. Hasta
ahora hemos configurado con éxito el enrutamiento de permisos en la ruta local, mina iniciar sesión en el sistema como
posterior optimización
1. La visualización de la lista del menú y el cambio de la navegación secundaria:
2. Evite que se pierda la ruta de actualización, ya que la aplicación de una sola página se reiniciará al actualizar, todas las rutas configuradas se perderán en este momento. Una vez de vuelta a la liberación, solo la configuración local La ruta puede saltar. En este momento, podemos ejecutar el siguiente código en app.vue (ps: no importa dónde se actualice, se ejecutará app.vue): de
modo que incluso si se actualiza, la ruta se reconfigurará.
3. Acerca del control de nivel del botón de página, puede personalizar una instrucción para hacer esto. Debido a que tenemos permiso para colocar una lista de objetos ruta meta correspondientes en, por lo que podemos fácilmente volver a cada uno de los permisos de página del usuario actual en la página actual propiedad de
referencia a las instrucciones oficiales documentos definidos
Conclusión
Después de terminar el trabajo, se debe al método de addRoutes agregado en vue-router2, de lo contrario
Creo que ha dominado el método después de leer el caso de este artículo. Para más emocionante, ¡preste atención a otros artículos relacionados en la red china de php!
Lectura recomendada:
PHP genera una cadena aleatoria con una longitud personalizada
El recorte de imágenes php y las miniaturas usan ejemplos para explicar
Lo anterior es el contenido detallado de vue addRoutes para realizar los pasos dinámicos del menú de enrutamiento de permisos. ¡Para más detalles, preste atención a otros artículos relacionados en la red china de php!
Enlace a este artículo: h ttps: //www.php.cn/js-tutorial-397246.html
