Detaillierte Erläuterung der Verwendung von Vue Nested Routing und 404-Umleitung

Dieses Mal werde ich Ihnen eine detaillierte Erklärung der Verwendung von Vue-verschachteltem -Routing und 404-Umleitung geben Fälle, werfen wir einen Blick darauf.

Teil 1: Vue Nested Routing

Was ist Nested Routing?

Verschachteltes Routing bedeutet, dass Sie das Routing unter einer gerouteten Seite weiterhin verwenden können. Verschachtelung bedeutet Routing im Routing. Wenn wir beispielsweise in Vue kein verschachteltes Routing verwenden, gibt es nur ein

, aber wenn wir es verwenden, gibt es ein anderes

in einer Komponente, was ebenfalls eine Verschachtelung darstellt. <router-view><router-view>

Warum verschachteltes Routing verwenden?

Beispielsweise gibt es auf einer Seite drei

Schaltflächen

im oberen Teil der Seite, und im unteren Teil werden unterschiedliche Inhalte angezeigt, je nachdem, ob auf verschiedene Schaltflächen geklickt wird. Dann können wir Stellen Sie sich den unteren Teil dieser Komponente als verschachtelte Route vor, was bedeutet, dass sich unter dieser Komponente ein weiteres befinden muss. Wenn ich auf verschiedene Schaltflächen klicke, wird deren Router-Link angezeigt wird in dieses <router-view> gerendert. <router-view>Wie wird die offizielle Website vorgestellt?

Jedes Mal, wenn wir über die offizielle Website sprechen, müssen wir über Baidu sprechen. Verwenden Sie nicht die Baidu-Suche

. .

Zu sagen, dass die offizielle Website dieses Bild zitiert hat, ist die Absicht gut, aber die Beschreibung ist zu umständlich. Reklamieren Sie. .

Dies ist eine gute Anwendungsschnittstelle im wirklichen Leben, die normalerweise aus mehreren Schichten verschachtelter Komponenten besteht. In ähnlicher Weise entspricht jedes dynamische Pfadsegment in der URL auch jeder Ebene verschachtelter Komponenten gemäß einer bestimmten Struktur. Wie oben gezeigt.

Das heißt, der Benutzer repräsentiert die Benutzerseite und der Benutzer kann als eine einzelne Seite in vue betrachtet werden. Für einen Benutzer muss es einen Benutzer geben (Xiao Ming, Xiao Hong). , das Profil hier kann als persönliche Homepage verstanden werden, und die Beiträge hier können als von dieser Person veröffentlichte Artikel verstanden werden, und der Titel darf sich beispielsweise nicht ändern, unabhängig davon, ob Sie zu den von dieser Person veröffentlichten Artikeln wechseln oder zu wechseln Auf der persönlichen Homepage dieser Person möchten wir alle oben dasselbe anzeigen. Wenn wir wechseln, können wir diesen Teil mit <router-view> schreiben.

Mit Hilfe von Vue-Router und verschachtelter Routing-Konfiguration kann diese Beziehung leicht ausgedrückt werden.

<p id="app">
 <router-view></router-view>
</p>

rrreeOK! Das ist grob verschachteltes Routing! Darunter platziert der erste Codeabschnitt

in der Datei. Dies ist der Exit der obersten Ebene, der die mit der erweiterten Route übereinstimmenden Komponenten rendert.

Aus der Routing-Konfiguration können wir Folgendes ersehen: Wenn der Pfad /user/Xiaoming oder /user/小红 ist, wird der Benutzer auf der Seite gerendert, und dieses Rendering ist die Route der obersten Ebene. (:id ist Xiao Ming und Xiao Hong,). Dann gibt es auf dieser Seite eine verschachtelte Route. Wenn die URL /user/Xiao Ming lautet, wird auf dieser sekundären Route natürlich nichts angezeigt, auch wenn sie nur /user/Xiao Ming lautet Etwas, dann können wir die Route entsprechend dem Pfad festlegen: „“, sodass sogar /user/Xiao Ming mehr anzeigen kann. <router-view>

Wenn wir die persönliche Homepage von Xiao Ming sehen möchten, ist sie /user/Xiao Ming/profile. Dann wird die UserProfile-Komponente in dieser sekundären Route gerendert.

Wenn wir die von Xiao Ming veröffentlichten Artikel lesen möchten, ist dies der Fall /user/Xiao Ming/posts Zu diesem Zeitpunkt wird die UserPost-Komponente in dieser sekundären Route gerendert, die auch die sekundäre Route ist.

Tatsächlich gibt es nur eine begrenzte Anzahl von Konzepten, ist das nicht ganz einfach?

Aber Sie müssen auch auf die folgenden Punkte achten:

1. Wie aus dem obigen Code ersichtlich ist: In der Komponente können wir den Benutzer abrufen über Xiao Ming in /Xiao Ming/post, damit wir personalisierte Einstellungen vornehmen können.

2. Verschachtelte Pfade, die mit / beginnen, werden als Stammpfad betrachtet, sodass Sie verschachtelte Komponenten vollständig nutzen können, ohne verschachtelte Pfade festzulegen. $route.params.id

也就是说： 在上面的代码中，我们在children下，写path: "profile", 就相当于拼接成了 /user/:id/profile ，当然，我们也可以直接写为 path: "/user/:id/profile" ，最终的结果是一样的，但是我个人认为后者的表示方法可以跟清晰的观察结构。 如果嵌套层数过多，可能会出错。

第二部分： 404重定向

有时，我们可能会输入错的 url， 或者不再存在等各种原因导致其不再能被访问，那么我们就可以对于这种情况进行重定向。 很简单，只要在路由中添加下面的代码就可以了：

{
   path: "*",
   redirect: "/"
}

即对于所有的（*代表所有）错误页面，我们都可以重定向到 "/" 中。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

Vue.js计算与侦听器属性使用详解

动态引入js四种方法总结

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung von Vue Nested Routing und 404-Umleitung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!