So verwenden Sie vue3+TypeScript+vue-router

 $npm install -g @vue/cli
$vue --version
@vue/cli 4.5.15
$vue erstelle mein Projekt

 mein-projekt
+--- babel.config.js
+--- Paketsperre.json
+--- Paket.json
+--- öffentlich
| +--- favicon.ico
| +--- index.html
+--- README.md
+--- Quelle
| +--- App.vue
| +--- Vermögenswerte
| | +--- logo.png
| +--- Komponenten
| | +--- HalloWelt.vue
| +--- main.ts
| +--- shims-vue.d.ts
+--- tsconfig.json
+--- Knotenmodule
| +--- ...

 $npm init vite-app <Projektname>
$cd <Projektname>
$ npm installieren
$ npm ausführen dev

 Projektname
+--- übersicht.html
+--- Paketsperre.json
+--- Paket.json
+--- öffentlich
| +--- favicon.ico
+--- Quelle
| +--- App.vue
| +--- Vermögenswerte
| | +--- logo.png
| +--- Komponenten
| | +--- HalloWelt.vue
| +--- index.css
| +--- main.js
+--- Knotenmodule
| +--- ...

 /* eslint-deaktivieren */
Deklariere das Modul '*.vue' {
  Importtyp {DefineComponent} von 'vue'
  Konstante Komponente: DefineComponent<{}, {}, any>
  Standardkomponente exportieren
}

 $ npm installiere vue-router@4

 {
  "Name": "mein-Projekt",
  "version": "0.1.0",
  "privat": wahr,
  "Skripte": {
    "dienen": "vue-cli-service dienen",
    "Build": "Vue-CLI-Service-Build",
    "Fussel": "Vue-CLI-Service-Fussel"
  },
  "Abhängigkeiten": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0",
    "vue-router": "^4.0.12"
  },
  "devAbhängigkeiten": {
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/parser": "^4.18.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-typescript": "^7.0.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0",
    "Typoskript": "~4.1.5"
  }
}

 importiere { createRouter, createWebHashHistory } von "vue-router"
 
Home aus '../components/Home.vue' importieren
importiere About aus '../components/About.vue'
Benutzer aus '../components/User.vue' importieren
 
const Routen = [
	// Einzelheiten zu den Router-Parametern finden Sie weiter unten {
		Pfad: "/home",
		Name: "Heim",
		Komponente: Startseite
	},
	{
		Pfad: "/about",
		Name: "Über",
		Komponente: Über
	},
	{
		Pfad: "/user/:uid", // dynamischer Parametername: "user",
		Komponente: Benutzer
	}
]
exportiere const router = createRouter({
	Verlauf: createWebHashHistory(),
	Routen: Routen
})

 <Vorlage>
  <div>Home-Komponente</div>
</Vorlage>
 
<script lang="ts">
importiere { defineComponent } von "vue";
 
exportiere StandarddefiniereKomponente({
  Name: "Home",
  aufstellen() {
	zurückkehren {
	  //Zurückgegebene Daten };
  },
});
</Skript>

 <Vorlage>
  <div>Über die Komponente</div>
</Vorlage>
 
<script lang="ts">
importiere { defineComponent } von "vue";
 
exportiere StandarddefiniereKomponente({
  Name: "Über",
  aufstellen() {
	zurückkehren {
	  //Zurückgegebene Daten };
  },
});
</Skript>

 <Vorlage>
  <div>Benutzerkomponente</div>
</Vorlage>
 
<script lang="ts">
importiere { defineComponent } von "vue";
 
exportiere StandarddefiniereKomponente({
  Name: "Benutzer",
  aufstellen() {
	zurückkehren {
	  //Zurückgegebene Daten };
  },
});
</Skript>

 <Vorlage>
  <div>{{ AppMessage }}</div>
  <!-- Router-Link wird als Tag gerendert-->
  <router-link to="/home">Zuhause</router-link>
  <router-link to="/about">über</router-link>
  <router-link to="/user/lczmx">Benutzer</router-link>
 
  <!-- Routing-Ausgang -->
  <!-- Komponenten, die mit der Route übereinstimmen, werden hier gerendert-->
  <Router-Ansicht></Router-Ansicht>
</Vorlage>
 
<script lang="ts">
importiere { defineComponent } von "vue";
 
exportiere StandarddefiniereKomponente({
  Name: "App",
  aufstellen() {
	const appMessage = "App-Komponente";
	zurückkehren {
	  //Zurückgegebene Daten appMessage,
	};
  },
});
</Skript>
<Stil>
/* Stile hinzufügen */
#app {
  Textausrichtung: zentriert;
  Rand oben: 50px;
}
A {
  Rand: 30px;
  Anzeige: Inline-Block;
}
</Stil>

 importiere { createApp } von 'vue'
App aus „./App.vue“ importieren
importiere './index.css'
 
importiere { router } von './router'
 
//Erstelle eine Anwendung und gib das entsprechende Instanzobjekt zurück const app = createApp(App)
 
// Vue-Router-Plugin installieren app.use(router)
// Rufen Sie die Mount-Methode app.mount('#app') auf.

 $ npm ausführen serve

> [email protected] dienen
> vue-cli-service dienen 

 INFO: Entwicklungsserver wird gestartet …
98% nach der Ausgabe von CopyPlugin

 FERTIG Erfolgreich kompiliert in 6387 ms, 16:14:30 Uhr

  App läuft unter:
  - Lokal: http://localhost:8080/
  - Netzwerk: http://192.168.43.12:8080/

  Beachten Sie, dass die Entwicklungsversion nicht optimiert ist.
  Führen Sie „npm run build“ aus, um einen Produktionsbuild zu erstellen.

Keine Probleme gefunden.

 const Routen = [
  // Dynamische Segmente beginnen mit einem Doppelpunkt { path: '/users/:id', component: User },
  //Verwende den regulären Ausdruck `()` Der Inhalt wird an den vorherigen pathMatch übergeben
  // Wert unter route.params.pathMatch { Pfad: '/:pathMatch(.*)*', Name: 'NotFound', Komponente: NotFound },
]

 <Vorlage>
  <div>Benutzerkomponente</div>
  <p>Aktueller Benutzer: {{ uid }}</p>
 
  <router-link to="/Benutzer/lczmx">lczmx</router-link>
  <router-link to="/user/jack">Jack</router-link>
</Vorlage>
 
<script lang="ts">
importiere { defineComponent, watch, ref } von "vue";
importiere { useRouter } von "vue-router";
 
exportiere StandarddefiniereKomponente({
  Name: "Benutzer",
  aufstellen() {
    const router = useRouter();
    const uid = ref(router.currentRoute.value.params.uid);
    betrachten(
      // Auf nicht reagierende Daten warten() => router.currentRoute.value,
      (Wert) => {
        // UID ändern
        uid.Wert = val.params.uid;
      }
    );
    zurückkehren {
      // Zurückgegebene Daten-UID,
    };
  },
});
</Skript> 

 const Routen = [
    {
        Weg: "/",
        // Methode 1: URL hartcodieren
        // Umleitung: "/home", // Umleitung zu "/home" beim Zugriff auf "/"
 
        // Methode 2: Springe zur entsprechenden benannten Routenumleitung: { name: "home" },
 
        //Schreibmethode 3 definiert eine Methode //Diese Methode kann auch einen relativen Pfad zurückgeben/*
        umleiten: zu => {
            // Die Methode erhält die Zielroute als Parameter „to“
 
            // umgeleiteten String-Pfad/Pfadobjekt zurückgeben			
			// Abfrage gibt Parameter an return { Pfad: '/home', Abfrage: { q: to.params.searchText } }
        },
        */
    },
    {
        Pfad: "/home",
        Name: "Heim",
        Komponente: Startseite
    }
]

 const Routen = [
  {
    Pfad: '/user/:Benutzername',
    Name: "Benutzer",
    Komponente: Benutzer
  }
]

 <Vorlage>
  <div>Benutzerkomponente</div>
  <p>Aktueller Benutzer: {{ uid }}</p>
 
  <router-link :to="{ name: 'benutzer', params: { uid: 'lczmx' } }"
    >lczmx</router-link
  >
  <router-link :to="{ name: 'benutzer', params: { uid: 'jack' } }"
    >Buchse</Router-Link
  >
</Vorlage>

 router.push({ Name: 'Benutzer', Parameter: { UID: 'lczmx' } })

 importiere { createRouter, createWebHashHistory } von "vue-router"
 
Home aus '../components/Home.vue' importieren
importiere About aus '../components/About.vue'
Benutzer aus '../components/User.vue' importieren
 
const Routen = [
	{
		Weg: "/",
		Komponenten:
			default: Home, // standardmäßig wird die Home-Komponente verwendet a: About, // a wird die About-Komponente verwendet b: User, // b wird die User-Komponente verwendet },
 
	},
	{
		Pfad: "/home",
		Komponenten:
			default: About, // Benutze standardmäßig die About-Komponente a: Home, // a verwendet die Home-Komponente b: User, // b verwendet die User-Komponente },
 
	},
]
 
 
exportiere const router = createRouter({
	Verlauf: createWebHashHistory(),
	Routen: Routen
})

 <Vorlage>
  <div>{{ AppMessage }}</div>
 
  <!-- Router-Link wird als Tag gerendert-->
  <router-link zu="/">/</router-link>
  <router-link zu="/home">/home</router-link>
 
  <!-- Routing-Ausgang -->
  <!-- Komponenten, die mit der Route übereinstimmen, werden hier gerendert-->
  <!-- Standard -->
  <Router-Ansicht></Router-Ansicht>
  <router-view name="über"></router-view>
  <router-view name="Benutzer"></router-view>
</Vorlage>
 
<script lang="ts">
importiere { defineComponent } von "vue";
 
exportiere StandarddefiniereKomponente({
  Name: "App",
  aufstellen() {
	const appMessage = "App-Komponente";
	zurückkehren {
	  //Zurückgegebene Daten appMessage,
	};
  },
});
</Skript>
<Stil>
/* Stile hinzufügen */
#app {
  Textausrichtung: zentriert;
  Rand oben: 50px;
}
A {
  Rand: 30px;
  Anzeige: Inline-Block;
}
</Stil>

 <Vorlage>
  <div>Über die Komponente</div>
</Vorlage>

 <Vorlage>
  <div>Home-Komponente</div>
</Vorlage>

 <Vorlage>
  <div>Benutzerkomponente</div>
</Vorlage>

 const Routen = [
    // Sie können auf "/home" oder "/" zugreifen.
    // und der Zugriffspfad wird sich nicht ändern{
        Pfad: "/home",
        Name: "Heim",
        Komponente: Home,
        Alias: "/"
    }

 importiere { createRouter, createWebHashHistory } von "vue-router"
 
Home aus '../components/Home.vue' importieren
importiere About aus '../components/About.vue'
Benutzer aus '../components/User.vue' importieren
Importiere UserHome aus „../components/UserHome.vue“
Importiere Benutzereinstellungen aus „../components/UserSettings.vue“
Importiere UserProfile aus „../components/UserProfile.vue“
 
const Routen = [
	// Sie können auf "/home" oder "/" zugreifen.
	// und der Zugriffspfad wird sich nicht ändern {
		Pfad: "/home",
		Name: "Heim",
		Komponente: Home,
		Alias: "/"
	},
	{
		Pfad: "/about",
		Name: "Über",
		Komponente: Über
	},
	{
		Pfad: "/user/:uid", // dynamischer Parametername: "user",
		Komponente: Benutzer, // Router, die in Router-View-Rendering-Kindern verschachtelt sind: [
			// URLs wie /user/lczmx abgleichen
			{ Pfad: "", Komponente: UserHome },
 
			// URLs wie /user/lczmx/settings abgleichen
			{ Pfad: "Einstellungen", Komponente: Benutzereinstellungen, Name: "Benutzereinstellungen" },
 
			// URLs wie /user/lczmx/profile abgleichen
			{ Pfad: "Profil", Komponente: Benutzerprofil, Name: "Benutzerprofil" }
		]
	}
]
 
 
exportiere const router = createRouter({
	Verlauf: createWebHashHistory(),
	Routen: Routen
})

 <Vorlage>
  <div>
	<router-link :to="{ name: 'user-settings' }">Einstellungen</router-link>
	<router-link :to="{ name: 'user-profile' }">Profil</router-link>
  </div>
 
  <Router-Ansicht></Router-Ansicht>
</Vorlage>

 <Vorlage>
  <div>Benutzer-Homepage</div>
</Vorlage>

 <Vorlage>
  <div>Seite mit Benutzerdetails</div>
</Vorlage>

 <Vorlage>
  <div>Seite mit Benutzereinstellungen</div>
</Vorlage>

 <Vorlage>
  <div>Über die Komponente</div>
  <button @click="changeRouter">Route ändern</button>
</Vorlage>
 
 
<script lang="ts">
importiere { defineComponent } von "vue";
 
importiere { useRouter } von "vue-router";
 
exportiere StandarddefiniereKomponente({
  Name: "Über",
  aufstellen() {
    // Routerobjekt abrufen const router = useRouter();
 
    const changeRouter = () => {
      /* Beispiel für die Änderung von Routen */
 
      // 1 String-Pfad router.push("/users/lczmx");
 
      // 2 Objekt mit Pfad router.push({ path: "/users/lczmx" });
 
      // 3 benannte Routen und hinzugefügte Parameter, damit die Routen die URL erstellen können
      router.push({ Name: "Benutzer", Params: { Benutzername: "lczmx" } });
 
      // 4 mit Abfrageparametern ist das Ergebnis /register?plan=private
      router.push({ Pfad: "/register", Abfrage: { Plan: "privat" } });
 
      // 5 mit Hash, das Ergebnis ist /about#team
      router.push({ Pfad: "/about", Hash: "#team" });
 
      // 6 Wir können die URL manuell erstellen, müssen die Kodierung aber selbst handhaben. const username = "lczmx";
      router.push(`/Benutzer/${Benutzername}`); // -> /Benutzer/lczmx
      // Ähnlich router.push({ path: `/user/${username}` }); // -> /user/lczmx
      // Verwenden Sie nach Möglichkeit „name“ und „params“, um von der automatischen URL-Kodierung zu profitieren router.push({ name: "user", params: { username } }); // -> /user/lczmx
 
      // 7 `params` kann nicht mit `path` verwendet werden, sonst wird `params` ignoriert router.push({ path: "/user", params: { username } }); // -> /user
 
      // 8 replace ist wahr und fügt nichts zum Verlauf hinzu router.push({ path: "/home", replace: true });
      // Entspricht router.replace({ path: "/home" });
 
      // 9 Durch den Verlauf // Einen Datensatz vorwärts bewegen, dasselbe wie router.forward() router.go(1);
      //Gibt einen Datensatz zurück, dasselbe wie router.back() router.go(-1);
      // 3 Datensätze vorwärts gehen router.go(3);
      // Wenn nicht so viele Datensätze vorhanden sind, wird stillschweigend abgebrochen router.go(-100);
      router.go(100);
    };
    zurückkehren {
      //Zurückgegebene Daten changeRouter,
    };
  },
});
</Skript>
 
<Stil>
Taste {
  Rand: 30px;
}
</Stil>