Ein Beispiel dafür, wie Vue vierstufigen Navigations- und Verifizierungscode implementiert

<Vorlage>
  <div id="home-wrapper">
    <h1>{{ Name }}</h1>
    <Navigation>
      <!-- Der Ausgang des sekundären Routers befindet sich in der Schnittstelle des primären Routers-->
      <router-link to="/one">eins</router-link>
      <router-link :to="{ name: 'Two' }">zwei</router-link>
      <router-link :to="threeObj">drei</router-link>
      <!-- Programmatische Navigation/Routing -->
      <button @click="fourBtn">vier</button>
    </nav>
     <Router-Ansicht></Router-Ansicht>
  </div>
</Vorlage>
 
<Skript>
Standard exportieren {
  Daten() {
    zurückkehren {
      Name: "Home",
      dreiObjekt: {
        Name: "Drei",
      },
    };
  },
  Methoden: {
    vierBtn() {
      var Benutzer-Id = 6789;
      dies.$router.push({
        Pfad: `four/${userId}`,
      });
    },
  },
};
</Skript>
 
<style lang="less" scoped>
#home-Wrapper{
  nav{
    Anzeige: Flex;
    A{
      biegen: 1;
      Hintergrundfarbe: Antikweiß;
      Höhe: 50px;
      Zeilenhöhe: 50px;
    }
  }
}
</Stil>

<Vorlage>
    <div>
        <h1>{{name}}</h1>
        <ul>
            <li>
                <router-link zum="/levl31">Web</router-link>
            </li>
            <li>
                <router-link :to="{name:'name32'}">Backend</router-link>
            </li>
            <li>
                <!-- Die Verwendung benannter Routen ist beim mehrstufigen Routing bequemer-->
                <router-link :to="{name:'name33'}">KI</router-link>
            </li>
            <li>
                <router-link to="/one/levl34">Benutzeroberfläche</router-link>
            </li>
            <li>
                <router-link :to="{name:'name35'}">Router der Stufe 3-4</router-link>
            </li>
        </ul>
        <!-- Der Router der dritten Ebene verlässt die Schnittstelle des Routers der zweiten Ebene-->
        <Router-Ansicht></Router-Ansicht>
 
    </div>
</Vorlage>
 
<Skript>
    Standard exportieren {
        Name: „Eins“,
        Daten() {
            zurückkehren {
                Name: "Erste Seite"
            }
        },
        
    }
</Skript>
 
<style lang="less" scoped>
ul{
    Listenstil: keiner;
    Anzeige: Flex;
    Breite: 100 %;
    Rand links: -40px;
 
}
li{
    biegen: 1;
    Hintergrundfarbe: orange;
    Höhe: 50px;
    Zeilenhöhe: 50px;
 
}
 
</Stil>

<Vorlage>
  <div>
    <h1>{{ Name }}</h1>
    <button @click="changeCode">Bestätigungscode</button>
    <img :src="imgCodeUrl" alt="">
  </div>
</Vorlage>
 
<Skript>
Standard exportieren {
  // Der Alias ​​der Komponente ist praktisch für die Anzeige während des Vue-Debugging-Namens: "Two_zh",
  Daten() {
    zurückkehren {
      Name: "Seite 2",
      imgCodeUrl:""
    };
  },
  Methoden: {
    // Den Bestätigungscode abrufen changeCode() {
        // /api ist die Proxy-Konfiguration in vue.config.js const url = "api/v1/captchas";
    // const url = "https://elm.cangdu.org/v1/captchas";
      dies.axios
        .post(url, {})
        .then((res) => {
            diese.imgCodeUrl =res.data.code 
          console.log("Überprüfungscode-Schnittstelle:",res);
        })
        .catch((e) => {
          console.log("Fehler:", e);
        });
    },
  },
};
</Skript>
 
<style lang="less" scoped>
</Stil>

<Vorlage>
    <div>
        <h1>{{name}}</h1>
 
    </div>
</Vorlage>
 
<Skript>
    Standard exportieren {
        Name: 'drei',
        Daten() {
            zurückkehren {
                Name: "Seite 3"
            }
        },
        
    }
</Skript>
 
<style lang="less" scoped>
 
</Stil>

<Vorlage>
    <div>
        <h1>{{name}}</h1>
 
    </div>
</Vorlage>
 
<Skript>
    Standard exportieren {
        Name: 'Vier',
        Daten() {
            zurückkehren {
                Name: "Seite 4"
            }
        },
        erstellt() {
            console.log("Seite 4 erstellt:",this.$route)
        },
    }
</Skript>
 
<style lang="less" scoped>
 
</Stil>

Vue von „vue“ importieren
VueRouter von „vue-router“ importieren
importiere Home2 aus '@/views/day/home.vue'
 
Vue.use(VueRouter)
 
const Routen = [
  {
    Weg: "/",
    Name: 'home2',
    Komponente: Home2,
    Weiterleitung: "/eins",
    Kinder: [
      {
        Pfad: "/one",
        Name: 'Eins',
        Komponente: () => import("@/views/day/one.vue"),
        Kinder: [
          {
            Pfad: '/levl31',
            // h creacteElement bedeutet, einen virtuellen Dom/Label-Vnode zu erstellen 
            // Der erste Parameter ist die Tag-Namenserweiterung. Wenn die Komponente, die Sie schreiben, auch der Tag-Name ist // Der zweite Parameter ist die optionale Attributkonfiguration des Tags // Der dritte Parameter ist der Inhalt der Tag-Komponente: {
              rendern(h) {
                return h("h1", "frontend")
              }
            },
          },
          {
            // /Default stellt das Stammverzeichnis dar#/levl31
            // Ohne Schrägstrich, es wird automatisch aneinandergereiht#/one/levl32
            // Benannten Routing-Pfad verwenden: „levl32“
            Name: "name32",
            Komponente: {
              rendern(h) {
                return h("h1", "Backend")
                }
              },
            },
            {
              Pfad:"/one?levl33",
              Name:"name33",
              Komponente:{
                rendern(h) {
                  return h("h1", "Künstliche Intelligenz")
                  }
              }
            },
            {
              Pfad:"/one/levl34",
              Name:"name34",
              Komponente:{
                rendern(h) {
                  return h("h1","Nur ein Künstler")
                  }
              }
            },
            //Routing der Ebenen 3 und 4 {
              Pfad: „level35“,
              Name:"name35",
              Komponente:()=>import("@/views/Home.vue"),
              //Untergeordnete Routing-Elemente der vierten Ebene:[
                {
                  Pfad: „Junge“,
                  Name:"Junge",
                  Komponente:()=>importieren("@/views/boy.vue")
                },
                {
                  Pfad: „Mädchen“,
                  Name:"Mädchen",
                  Komponente:()=>importieren("@/views/girl.vue")
                }
 
              ]
 
            }
        ]
      },
      {
        Pfad: "/zwei",
        Name: 'Zwei',
        Komponente: () => import("@/views/day/two.vue")
      },
      {
        Pfad: "/drei",
        Name: 'Drei',
        Komponente: () => import("@/views/day/three.vue")
      },
      {
        // Optionaler Parameter \d Numerische Zeichenfolge stimmt nicht mit dem Pfad überein: "four/:id(\\d*)?",
        Name: 'Vier',
        Komponente: () => import("@/views/day/four.vue")
      },
    ]
  }
]
 
const router = neuer VueRouter({
  Routen
})
 
Standardrouter exportieren