https://www.php.cn/js-tutorial-397246.html
Demande
Récemment, a repris un système de gestion d'arrière-plan, qui doit obtenir l'effet de tirer le menu de navigation de l'arrière-plan; les menus de navigation retirés respectivement sont différents selon les autorisations de l'utilisateur connecté, et il existe également des différences dans l'interface opérationnelle.
Le problème
Parce que le système de gestion d'arrière-plan est prêt à utiliser la combinaison de vue + vue-router + element-ui + vuex, mais l'application à page unique a instancié et injecté vue-router dans l'instance de vue avant d'entrer dans la page, donc entrez Il n'y a aucun moyen de re-personnaliser l'itinéraire lors de la connexion à la page. Ensuite, toutes sortes de Baiguo ont découvert que vue-router fournissait la méthode addRoutes dans la version 2.0 pour ajouter des routes, et l'aube de l'espoir est apparue.
Après beaucoup de lancers, j'ai finalement réalisé la fonction, elle est enregistrée pour un examen facile et j'espère aider les camarades qui ont aussi des besoins.
Des idées
1. Configurez d'abord une adresse de routage fixe localement, telle que la connexion, 404 pages, comme suit: Une
fois ces routes fixes configurées, nous ne pouvons accéder qu'à la page de connexion, sinon nous ne pouvons pas continuer.
2. Ensuite, une étape importante, nous devons nous mettre d'accord avec l'ancien fer à cheval sur les informations de la liste du menu d'autorisation qui doivent être retournées; tout d'abord, nous analysons ici la structure de routage dont nous avons besoin, et prenons ici mon propre routage comme exemple. Si je définis le parcours directement par moi-même, ce sera la structure suivante:
Selon l'analyse structurelle ci-dessus, les routes qui doivent vraiment être configurées dynamiquement sont en fait la partie enfants sous / layout, donc le backend doit nous renvoyer un tableau contenant toutes les routes. Les
données retournées sont la liste de navigation de premier niveau dans la rootList. La navigation de premier niveau n'a pas de fonction de routage, mais sert uniquement de déclencheur pour changer de menu de deuxième niveau. La SubList est l'information de routage dont nous avons vraiment besoin.
3. Après avoir obtenu les informations de routage des autorisations, nous devons traiter les données localement et les assembler dans les données dont nous avons besoin:
la méthode de traitement de la liste des menus et de la sous-liste: mergeSubInRoot et mergeRoutes. Jusqu'à
présent, nous avons réussi à configurer le routage des autorisations dans l'itinéraire local, le mien Connectez - vous au système d'
optimisation ultérieure
1. L'affichage de la liste des menus et le basculement de la navigation secondaire:
2. Empêche la perte de l'itinéraire de rafraîchissement, car l'application monopage sera réinitialisée lors de l'actualisation, tous les itinéraires configurés seront perdus à ce moment. Une fois de retour à la libération, seule la configuration locale La route peut sauter. À ce stade, nous pouvons exécuter le code suivant dans app.vue (ps: peu importe où il est actualisé, app.vue s'exécutera): de
cette façon, même s'il est actualisé, l'itinéraire sera reconfiguré.
3. À propos du contrôle du niveau du bouton de page, vous pouvez personnaliser une instruction pour ce faire. Étant donné que nous avons placé la liste des autorisations dans le méta-objet de l'itinéraire correspondant, nous pouvons facilement revenir aux autorisations que l'utilisateur actuel possède sur la page en cours sur chaque page.
Reportez-vous à la documentation officielle pour des instructions personnalisées
Conclusion
Une fois le travail terminé, cela est dû à la méthode addRoutes ajoutée dans vue-router2, sinon
Je crois que vous avez maîtrisé la méthode après avoir lu le cas de cet article.Pour plus passionnant, veuillez prêter attention aux autres articles sur le réseau chinois php!
Lecture recommandée:
PHP génère une chaîne aléatoire avec une longueur personnalisée
php recadrage d'image et des exemples d'utilisation de vignettes pour expliquer
Ce qui précède est le contenu détaillé de vue addRoutes pour réaliser les étapes du menu de routage d'autorisation dynamique.Pour plus de détails, veuillez prêter attention aux autres articles sur le réseau chinois php!
Lien vers cet article: h ttps: //www.php.cn/js-tutorial-397246.html
