Dieser Artikel führt Sie in das Verständnis von Vue ein und stellt das VueRouter-Routing im Detail vor. Ich hoffe, dass es für alle hilfreich ist!
Routing (englisch: Router) ist die Korrespondenz.
SPA bedeutet, dass eine Web-Website nur eine HTML-Seite hat und die Anzeige und Umschaltung aller Komponenten auf dieser einzigen Seite erfolgt. Zu diesem Zeitpunkt muss das Umschalten zwischen verschiedenen Komponenten durch Front-End-Routing implementiert werden. (Lernvideo-Sharing: vue-Video-Tutorial)
?Fazit?: Im SPA-Projekt muss das Umschalten zwischen verschiedenen Funktionen vom Front-End-Routing abhängen, um abgeschlossen zu werden!
Einfach verständliches Konzept: Korrespondenz zwischen Hash-Adresse und Komponente.
Das Front-End-Routing überwacht die Änderung der Hash-Adresse
Das Front-End-Routing rendert die KomponenteKorrespondenz zwischen der Hash-Adresse
und der!
1️⃣ Schritt 1: Übergeben Sie das <component></component>-Tag und kombinieren Sie es mit der dynamischen Rendering-Komponente comName. Der Beispielcode lautet wie folgt:
Hash-Wert für den <a>-Link hinzu. Der Beispielcode lautet wie folgt: </a>
3️⃣ Überwachen Sie in der Lebenszyklusfunktion erstellt die Änderung der
Hash-Adresse in der Adressleiste des Browsers und ändern Sie dynamisch den Namen der anzuzeigenden Komponente. Der Beispielcode lautet wie folgt: 
2. Grundlegende Verwendung von Vue-Router (1) Was ist Vue-Router?
vue-router ist die offizielle Routing-Lösung von vue.js . Es kann nur in Verbindung mit Vue-Projekten verwendet werden und kann den Komponentenwechsel in SPA-Projekten problemlos verwalten. ?Die offizielle Dokumentadresse von vue-router?: <component></component> 标签，结合 comName 动态渲染组件。示例代码如下：
2️⃣ 在 App.vue 组件中，为 <a> 链接</a>添加对应的 hash 值。示例代码如下：
3️⃣ 在 created 生命周期函数中，监听浏览器地址栏中 hash 地址的变化，动态切换要展示的组件的名称。示例代码如下：
vue-router 是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用，能够轻松的管理 SPA 项目中组件的切换。
?vue-router 的官方文档地址?：https://router.vuejs.org/zh/
安装 vue-router 包
创建路由模块
导入并挂载路由模块
声明路由链接和占位符
安装 vue-router 的命令如下：
npm install vue-router
在 src 源代码目录下，新建 router/index.js 路由模块，并初始化如下的代码：
在 src/main.jshttps://router.vuejs.org/zh/
vue -router Paket 🎜🎜🎜🎜 Routing-Modul erstellen 🎜🎜🎜🎜Routing-Modul importieren und mounten 🎜🎜🎜🎜Routing-Links und Platzhalter deklarieren 🎜🎜🎜vue-router lautet wie folgt: 🎜rrreeesrc , erstellen Sie ein neues router/index.js-Routing-Modul und initialisieren Sie den folgenden Code: 🎜🎜
🎜src/main.js Eintragsdatei, importieren und mounten Sie das Routing-Modul. Der Beispielcode lautet wie folgt: 🎜🎜🎜🎜Verwenden Sie in der src/App.vue-Komponente <router-link></router-link> und <router-link></router-link> 和 <router-view></router-view> 声明路由链接和占位符：
在 src/router/index.js 路由模块中，通过 routes 数组声明路由的匹配规则。示例代码如下：
路由重定向指的是：用户在访问地址 A 的时候，强制用户跳转到地址 C ，从而展示特定的组件页面。通过路由规则的 redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向：
通过路由实现组件的嵌套展示，叫做嵌套路由。
在 About.vue 组件中，声明 tab1 和 tab2 的子路由链接以及子路由占位符。示例代码如下：
在 src/router/index.js 路由模块中，导入需要的组件，并使用 children 属性声明子路由规则：
1️⃣ 动态路由指的是：把 Hash 地址中可变的部分定义为参数项，从而提高路由规则的复用性。
2️⃣ 在 vue-router 中使用英文的冒号（:）来定义路由的参数项。示例代码如下：
在动态路由渲染出来的组件中，可以使用 this.$route.params 对象访问到动态匹配的参数值。
为了简化路由参数的获取形式，vue-router 允许在路由规则中开启 props 传参。示例代码如下：
在浏览器中，点击链接实现导航的方式，叫做声明式导航。例如：
<a></a> 链接、vue 项目中点击 <router-link></router-link> 都属于声明式导航；在浏览器中，调用 API 方法实现导航的方式，叫做编程式导航。例如：
location.href
Deklarieren Sie im Routing-Modul src/router/index.js die Übereinstimmungsregeln der Route über das routes-Array. Der Beispielcode lautet wie folgt:
🎜redirect der Routing-Regel können Sie die Umleitung des Routings einfach festlegen: 🎜🎜
🎜🎜🎜(2) Verschachteltes Routing🎜🎜🎜implementiert durch Routing Die verschachtelte Darstellung von Komponenten wird als verschachteltes Routing bezeichnet. 🎜🎜🎜🎜🎜2.1 Erklärungsunter- Routenlinks und Unterrouten-Platzhalter🎜🎜🎜Deklarieren Sie in der About.vue-Komponente die Unterrouten-Links und Subroute-Platzhalter. Der Beispielcode lautet wie folgt: 🎜🎜 🎜🎜 🎜2.2 Deklarieren Sie untergeordnete Routing-Regeln über das Children-Attribut.🎜🎜🎜Im Routing-Modul src/router/index.js importieren Sie die erforderlichen Komponenten und verwenden das children-Attribut um die untergeordneten Routing-Regeln zu deklarieren: 🎜🎜🎜🎜🎜 (3) Dynamisches Routing-Matching🎜🎜🎜🎜3.1 Das Konzept des dynamischen Routings🎜🎜🎜1️⃣ Dynamisches Routing bezieht sich auf: Definieren des variablen Teils des Hash-Adresse als Parameterelement, wodurch die Wiederverwendbarkeit von Routing-Regeln verbessert wird. :) in vue-router, um Routing-Parameter zu definieren. Der Beispielcode lautet wie folgt: 🎜🎜 🎜🎜 🎜3.2 $route.params-Parameterobjekt🎜🎜🎜In der von dynamischen Routing gerenderten Komponente können Sie this.$route.params verwenden Code> Das Objekt greift auf <span style="color:#dd0000">dynamisch angepasste Parameterwerte</span> zu. 🎜🎜<img src="https://img.php.cn/upload/article/000/000/024/9b7aab9d4915693f10a0cd9ac2f0b1e3-13.png" alt="Bildbeschreibung hier einfügen">🎜🎜🎜3.3 Requisiten verwenden Empfangen Routing-Parameter 🎜🎜🎜<span style="max-width:90%">Um die Form des Abrufens von Routing-Parametern zu vereinfachen</span>, ermöglicht Vue-Router das Öffnen in <span style="color:#dd0000">Routing-Regeln props</span> Parameter übergeben. Der Beispielcode lautet wie folgt: 🎜🎜 🎜🎜 🎜(4) Deklarative Navigation und Programmatische Navigation🎜🎜🎜Klickt im Browser auf den Link, um die Navigation zu implementieren, die Deklarative Navigation. Zum Beispiel: 🎜<a></a> auf einer normalen Webseite und das Klicken auf <router-link></router-link> in einem Vue-Projekt sind beides deklarative Navigationen; 🎜 🎜🎜Im Browser ruft die API-Methode auf, um die Navigation zu implementieren, die als Programmatische Navigation. Zum Beispiel: 🎜location.href auf einer normalen Webseite, um zu einer neuen Seite zu springen, ist programmgesteuerte Navigation 🎜🎜🎜🎜 (5) Programmatisch in vue- Router-Navigations-API🎜🎜🎜vue-router bietet viele programmatische Navigations-APIs, darunter die am häufigsten verwendeten Navigations-APIs: 🎜this.$router.push('hash-Adresse'): Zur angegebenen Hash-Adresse springen und einen Verlaufseintrag hinzufügen; this.$router.push('hash 地址')： 跳转到指定 hash 地址，并增加一条历史记录；this.$router.replace('hash 地址')： 跳转到指定的 hash 地址，并替换掉当前的历史记录；this.$router.go(数值 n)： 实现导航历史前进、后退；调用 this.$router.push() 方法，可以跳转到指定的 hash 地址，从而展示对应的组件页面。示例代码如下：
调用 this.$router.replace() 方法，可以跳转到指定的 hash 地址，从而展示对应的组件页面；
?push 和 replace 的区别?：
调用 this.$router.go() 方法，可以在浏览历史中前进和后退。示例代码如下：
在实际开发中，一般只会前进和后退一层页面。因此 vue-router 提供了如下两个便捷方法：
$router.back()： 在历史记录中，后退到上一个页面$router.forward()this.$router.replace('hash-Adresse ' ): Zur angegebenen Hash-Adresse springen und den aktuellen Verlaufsdatensatz ersetzen;
this.$router.go(value n): Navigationsverlauf vorwärts und rückwärts implementieren; 5.1 $router.pushthis.$router.push() auf, um zur angegebenen Hash-Adresse zu springen und die entsprechende Komponentenseite anzuzeigen. Der Beispielcode lautet wie folgt: 5.2 $router.replace
Rufen Sie die Methode this.$router.replace() auf, um zur angegebenen Hash-Adresse zu springen und die entsprechende Komponentenseite anzuzeigen Unterschied?:
5.4 Vereinfachte Nutzung von $router.go
In der tatsächlichen Entwicklung wird im Allgemeinen nur eine Seite weitergeleitet und gesichert. Daher bietet vue-router die folgenden zwei praktischen Methoden:
$router.back(): Im Verlauf zurück$router.forward ( ): Im Verlauf vorwärts
Navigationswächter kann die Zugriffsberechtigungen der Route steuern.
Das schematische Diagramm sieht wie folgt aus:
Beziehen Sie sich auf das schematische Diagramm, um die Endergebnisse der 3 Möglichkeiten zum Aufrufen der nächsten Funktion zu analysieren:
🎜🎜🎜Aktuell Benutzer 🎜Habe 🎜Zugriffsrechte auf die Backend-Startseite, lass direkt los: next()🎜🎜Der aktuelle Benutzer 🎜hat 🎜Zugriffsrechte auf die Backend-Startseite, 🎜erzwinge ihn, zur Anmeldeseite zu springen🎜: next('/ login')🎜🎜aktueller Benutzer🎜 Ohne 🎜Zugriffsrechte auf die Backend-Startseite 🎜ist es nicht erlaubt, zur Backend-Startseite zu springen🎜: next(false)🎜🎜🎜🎜6.4 Zugriffsrechte auf die Backend-Startseite steuern🎜🎜🎜🎜🎜 🎜 (Teilen von Lernvideos: 🎜Web-Frontend-Entwicklung🎜, 🎜Grundlegendes Programmiervideo🎜)🎜Das obige ist der detaillierte Inhalt vonLassen Sie uns ausführlich über das Router-Routing in Vue sprechen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Die übergeordnete Vue-Komponente ruft die Methode der untergeordneten Komponente auf
vue v-wenn
Der Unterschied zwischen vue2.0 und 3.0
So übergeben Sie einen Wert an die Vue-Komponente
Der Unterschied zwischen vue3.0 und 2.0
Vue allgemeine Anweisungen
Was sind die am häufigsten verwendeten Anweisungen in Vue?
Der Unterschied zwischen mpvue und vue
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
