Introduction : Tout le monde sait que le système de gestion d'arrière-plan Ruoyi est un système de gestion d'arrière-plan au niveau de l'entreprise développé sur la base de SpringBoot, Spring Security, JWT, Vue & Element, qui peut être utilisé pour gérer des sites Web d'entreprise, des plateformes de commerce électronique, des applications mobiles, etc. Un système d'application avec de bonnes performances et une bonne expérience utilisateur. À l'heure actuelle, il existe des dizaines de k stars⭐ sur GitHub et Gitee, qui peuvent être utilisées gratuitement, mais les utilisateurs doivent également respecter les accords open source pertinents. Aujourd'hui, je vais partager comment ajouter des fosses de routage vue routeur dans le système Zoyi .
1. Créer une nouvelle page ( pas de navigation latérale )
1. Tout d'abord, créez un nouveau dossier de test sous le fichier de vues, puis créez respectivement one.vue et two.vue ;
2. Ouvrez Ruoyi System > System Management > Menu Management, cliquez sur le bouton Add dans le coin supérieur gauche, sélectionnez d'abord le menu, remplissez le chemin du composant,
Après avoir renseigné, changez pour sélectionner le répertoire, puis validez ;
3. Ajoutez ensuite les répertoires de fichiers one.vue et two.vue respectivement ;
4. De cette façon, vous pouvez voir le fichier nouvellement ajouté dans la navigation latérale ;
5. Ajoutez les codes correspondants dans les fichiers respectivement, et les effets suivants peuvent être obtenus ;
index.vue
<template>
<!-- test/index 路由坑位页面-->
<center style="margin-top:50px">
<div>
<!-- 头部按钮 -->
<div class="header_con">
<button @click="$router.push('/test/one')">to one.vue</button>
<button @click="$router.push('/test/two')">to two.vue</button>
</div>
<!-- 路由坑文件 -->
<div class="router_content">
<router-view></router-view>
</div>
</div>
</center>
</template>une.vue
<template>
<!-- one -->
<div style="font-size:30px">
这是one的页面元素
</div>
</template>deux.vue
<template>
<!-- two -->
<div style="font-size:30px">
这是two的页面元素
</div>
</template>Effet:
La vue du routeur est ajoutée avec succès, mais vous pouvez voir qu'elle ne se trouve plus dans la même page que la barre latérale de Ruoyi. Si vous souhaitez utiliser la même barre latérale, il vous suffit d' ajouter une autre couche de fichiers imbriqués sous le fichier de test. D'accord, expliquons en détail ci-dessous, des scénarios d'utilisation spécifiques et des distinctions spécifiques ;
2. Utilisez la même barre latérale ( avec navigation latérale )
1. Si vous souhaitez utiliser la barre latérale en même temps, vous devez ajouter le fichier imbriqué nest dans le fichier de test et placer le fichier vue dans le fichier nest (le contenu du fichier reste inchangé);
2. Reconfigurez l'adresse de routage, cliquez sur le menu de test de modification, sélectionnez l'option de menu, supprimez le chemin du composant et sélectionnez à nouveau le répertoire pour confirmer ;
3. Configurez la couche d'imbrication, c'est-à-dire le fichier de vue du routeur (l'idée d'ajouter est la même), sélectionnez d'abord le menu pour remplir le chemin du composant, après le remplissage, sélectionnez à nouveau le répertoire et cliquez sur OK ;
4. Cliquez ensuite sur Ajouter sur le nid nouvellement ajouté, et rajoutez one.vue et two.vue (les précédents one.vue et two.vue peuvent être supprimés s'ils ne sont pas utilisés);
structure:
5. De cette façon, la ré-ajout et la modification sont terminées, et examinez la nouvelle structure et l'effet du répertoire ;
Précautions:
1. Configurez le fichier router-view.Lorsque vous cliquez sur Ajouter, sélectionnez d'abord l'option de menu.Après avoir configuré le chemin du composant, sélectionnez à nouveau l'option de répertoire, puis confirmez.
2. Si vous pensez qu'il n'y a pas de problème avec le chemin du composant et le fichier que vous avez configuré, mais qu'il y a une erreur dans le saut, vous pouvez redémarrer le projet ;
J'espère que cet article pourra vous aider (●'◡'●)