Die Vue-Konfigurationsdatei generiert automatisch Routing- und Menüinstanzcode

{
  "Name": "RouterConfig",
  "Speisekarte": [{
    "id": "1", //Routen-ID, kann nicht wiederholt werden"name": "home", //Routenname"path": "/homePage", //Routenpfad"label": "Home", //Menütitel"selected": true, //Standardmäßig ausgewählt"icon": "el-icon-monitor", //Menüanzeigesymbol"open": true, //Standardmäßig geöffnet"component": "homePage/homePage.vue", //Komponentenroute"children": [ //Untermenü {
        "id": "3",
        "Name": "getCover",
        "Pfad": "/getCover",
        "label": "Cover-Aufnahme",
        "ausgewählt": falsch,
        "Symbol": "el-Symbol-Schere",
        "öffnen": falsch,
        "Komponente": "getCover/getCover.vue",
        "Kinder": []
      }
    ]
  },{
    "id": "2",
    "Name": "Testseite",
    "Pfad": "/Testseite",
    "label": "Test",
    "ausgewählt": falsch,
    "Symbol": "el-Symbol-Einstellung",
    "öffnen": falsch,
    "Komponente": "test/test.vue",
    "Kinder": []
  },{
    "id": "5",
    "Name": "Testmenü",
    "Pfad": "/testMenü",
    "label": "Menütest",
    "ausgewählt": falsch,
    "Symbol": "el-Symbol-Einstellung",
    "öffnen": falsch,
    "Komponente": "testMenu/testMenu.vue",
    "Kinder": []
  }]
}

Vue von „vue“ importieren
VueRouter von „vue-router“ importieren
importiere ro von „element-ui/src/locale/lang/ro“;
Vue.use(VueRouter)
//Führen Sie die Konfigurationsdatei router.json ein
: Lassen Sie routerMenu = require('@/config/router.json');
routerMenü = routerMenü.menü;
lass Menü = [];
//Routing konfigurieren let formatRoute = function (routerMenu,menu){
  für(lass i = 0; i < routerMenu.length; i++){
    lass temp = {
      Pfad: routerMenu[i].path,
      Name: routerMenu[i].name,
      //Beachten Sie, dass Ihre Komponenten beim Importieren mit require in verschiedene JS-Dateien verpackt werden. Sie werden bei Bedarf geladen. Diese JS-Datei wird nur geladen, wenn Sie auf die Routen-URL zugreifen.
      Komponente: auflösen => erfordern([`@/views/${routerMenu[i].component}`], auflösen)
    };
    menü.push(temp);
    wenn (routerMenu[i].children && routerMenu[i].children.length > 0) {
    //Untermenürouten rekursiv generieren formatRoute(routerMenu[i].children,menu);
    }
  }
}
//FormatRoute (RouterMenu, Menü) initialisieren.
//Umleitungseinstellungen const routes = [
  {
    Weg: '/',
    Umleitung: '/homePage'
  },
]
//Pushen Sie die generierte Routing-Datei in for(let i = 0; i < menu.length; i++)
  Routen.push(Menü[i]);
  
const router = neuer VueRouter({
  Routen
})

Standardrouter exportieren

<Vorlage>
  <div id="linkesMenü">

  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Name: "links",
  Daten(){
    zurückkehren {
      Speisekarte:[]
    }
  },
  Methoden:{
  //Knoten anhand der Routing-ID finden findNodeById(node,id){
      für(lass i = 0; i < Knotenlänge; i++){
        wenn(id == node[i].id){
          Knoten[i].ausgewählt = wahr;
          wenn(Knoten[i].Kinder && Knoten[i].Kinder.Länge > 0){
            dies.findNodeById(Knoten[i].Kinder,ID);
          }
          Knoten[i].öffnen = !Knoten[i].öffnen;
          wenn(dieser.$route.path !== node[i].path) dieser.$router.push(node[i].path);
        }anders{
          Knoten[i].ausgewählt = falsch;
          wenn(Knoten[i].Kinder && Knoten[i].Kinder.Länge > 0){
            dies.findNodeById(Knoten[i].Kinder,ID);
          }anders{

          }
        }
      }
    },
    //Wählen Sie den Menüknoten aus chooseNode(id){
      dies.findNodeById(dieses.Menü,id);
      let domTree = dieses.generatorMenu(dieses.menu,'',0)
      : Wenn Sie leftMenu verwenden, wird es als linkes Menü angezeigt.
      leftMenu.innerHTML = domTree;
    },
    //Menüverzeichnis dynamisch generieren generatorMenu(menu,temp,floor){
      für(lass i = 0; i < Menü.Länge; i++){
        temp += `<div style="width: max-content">
                    <div Klasse = "Menüoption" onclick = "chooseNode(${menu[i].id})"
                            Stil="Texteinzug: ${floor}em;
                            Hintergrundfarbe: ${menu[i].selected?'aquamarin':''};
                            Cursor: Zeiger;
                            Rand oben: 0,3rem;>
                        <i class="${menu[i].icon}"></i>
                        ${menu[i].label}`
        wenn(!menu[i].öffnen && menu[i].children && menu[i].children.length > 0){
          temp += `<i style="margin-left: 1rem" class="el-icon-arrow-down"></i>`
        }anders{
          wenn(Menü[i].öffnen &&Menü[i].Kinder &&Menü[i].Kinder.Länge > 0){
            temp += `<i style="margin-left: 1rem" class="el-icon-arrow-up"></i>`
          }
        }
        temp += `</div>`
        wenn(Menü[i].öffnen &&Menü[i].Kinder &&Menü[i].Kinder.Länge != 0){
          temp = dieses.generatorMenu(menu[i].children,temp,floor+1);
        }
        temp += `</div>`
      }
      Rücklauftemperatur;
    }
  },
  erstellt() {

  },
  montiert() {
    Fenster.Knoten auswählen = dieser.Knoten auswählen;
    lass Menü = [];
    //Konfigurationsdatei des Routing-Menüs abrufen const router = require('@/config/router.json');
    Menü = Router.Menü;
    dieses.Menü = Menü;
    let domTree = this.generatorMenu(menu,'',0)
    : Wenn Sie leftMenu verwenden, wird es als linkes Menü angezeigt.
    leftMenu.innerHTML = domTree;
  }
}
</Skript>

<Stilbereich>
  #linkesMenü{
    Mindesthöhe: berechnet (100vh – 44px – 1rem);
    Hintergrundfarbe: Kornblumenblau;
    Textausrichtung: links;
    Polsterung: 0,5rem 1rem;
    Schriftgröße: groß;
    Schriftstärke: fett;
  }
  .ausgewähltM{
    Hintergrundfarbe: Aquamarin;
  }
  .menuOption{
    Cursor: Zeiger;
  }
</Stil>