Einführung in die Methode zur Verwendung von verschachteltem Routing in Vue.js

Da Vue.js Single Page Applications (SPA) immer komplexer werden, benötigen Sie zunehmend Vue-Router sowie verschachtelte Routen. Verschachteltes Routing ermöglicht komplexere Benutzeroberflächen und ineinander verschachtelte Komponenten. Lassen Sie uns einen relativ einfachen Anwendungsfall erstellen, um die Nützlichkeit des verschachtelten Routings in Vue Router zu demonstrieren.

Mit Vue CLI einrichten

Wenn Sie es noch nicht installiert haben, führen Sie den folgenden Befehl aus, um Vue CLI global zu installieren:

$ npm install -g @vue/cli

oder

$ yarn global add @vue/cli

Jetzt können Sie den Befehl vue ausführen die Befehlszeile. Erstellen wir eine Vue-App namens alligator-nest: vue 命令了。让我们创建一个名为 alligator-nest 的 Vue 应用：

$ vue create alligator-nest

在提示符下选择默认预设（按 Enter 键）。之后，运行以下命令：

$ npm install vue-router

然后，在你选择的编辑器中打开 alligator-nest 目录。

基本代码

以下 CSS 将帮助我们为 UI 定位元素。将其作为样式表文件添加到 public/ 文件夹中，并在 public/index.html 中引用它。为此，我们将使用 CSS grid：

grid.css

.row1 {
  grid-row-start: 1;
  grid-row-end: 2;
}

.row12 {
  grid-row-start: 1;
  grid-row-end: 3;
}

.row123 {
  grid-row-start: 1;
  grid-row-end: 4;
}

.row2 {
  grid-row-start: 2;
  grid-row-end: 3;
}

.row23 {
  grid-row-start: 2;
  grid-row-end: 4;
}

.row3 {
  grid-row-start: 3;
  grid-row-end: 4;
}

.col1 {
  grid-column-start: 1;
  grid-column-end: 2;
}

.col12 {
  grid-column-start: 1;
  grid-column-end: 3;
}

.col123 {
  grid-column-start: 1;
  grid-column-end: 4;
}

.col1234 {
  grid-column-start: 1;
  grid-column-end: 5;
}

.col2 {
  grid-column-start: 2;
  grid-column-end: 3;
}

.col23 {
  grid-column-start: 2;
  grid-column-end: 4;
}

.col234 {
  grid-column-start: 2;
  grid-column-end: 5;
}

.col3 {
  grid-column-start: 3;
  grid-column-end: 4;
}

.col34 {
  grid-column-start: 3;
  grid-column-end: 5;
}

.col4 {
  grid-column-start: 4;
  grid-column-end: 5;
}

接下来，让我们对 vue-cli 添加的默认文件进行一些更改。

从 src/components 文件夹中删除 HelloWorld.vue，并从 src/App.vue 中删除所有与其相关的东西。对 App.vue 中的 HTML 标记和 CSS 样式进行以下修改。

<template>
  <div id="app">
    <h1 class="row1 col12">Alligator Nest</h1>
    <a class="row1 col3">Travels</a>
    <a class="row1 col4">About</a>
    <div class="row2 col234"></div>
  </div>
</template>
html, body {
  height: 100vh;
  width: 100vw;
  padding: 0;
  margin: 0;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  padding: 2%;
  height: 100%;
  display: grid;
  grid-template-rows: 20% 80%;
  grid-template-columns: 25% 25% 25% 25%;
}

如果你在项目的根目录中运行 npm run serve，则可以将鼠标悬停在浏览器中的 localhost:8080 上，并查看框架布局。那些 display:grid 属性很有用！现在我们可以开始创建路由了。

输入 Vue 路由

在 /components 文件夹中创建一个名为 AboutPage.vue 的组件。它看起来像这样：

<template>
  <div>
    <h2>About</h2>
    <p>Alligators were around during the time of the dinosaurs.</p>
  </div>
</template>

<script>
  export default {
    name: &#39;AboutPage&#39;,
  }
</script>

<style scoped>
  
</style>

现在我们的 main.js 文件需要 /about 路由。它看起来像这样。

import VueRouter from 'vue-router';
import Vue from 'vue';
import App from './App.vue';

Vue.config.productionTip = false;

import VueRouter from 'vue-router';
Vue.use(VueRouter);

import AboutPage from './components/AboutPage.vue';

const routes = [
  { path: '/about', component: AboutPage },
]

const router = new VueRouter({
  routes
})

new Vue({
  render: h => h(App),
  router
}).$mount('#app');

最后，让我们回到 App.vue，并将 “About” 的锚标记更改为属性为 to="/about" 的 <router-link> 标签。然后，将第二个 div 更改为 <router-view> 标签。确保保持网格定位类属性不变。

现在，我们有了一个功能齐全的站点框架，并为 “About” 页面处理了路由。

我们在此重点介绍路由功能，因此不会在样式上话费太多时间。尽管如此，我们也要让Travels 页面看起来更精致一些。

---

首先，创建一个 TravelPage，方法与创建 AboutPage 相同。在 main.js 中引用它。

还需要创建以下两个组件，这些组件最终将嵌套在 TravelPage.vue 中：

TravelAmericaPage.vue

<template>
  <div>
    <p>Alligators can be found in the American states of Louisiana and Florida.</p>
  </div>
</template>

<script>
  export default {
    name: &#39;TravelAmericaPage&#39;
  }
</script>

<style scoped>
</style>

TravelChinaPage.vue

<template>
  <div>
    <p>Alligators can be found in China&#39;s Yangtze River Valley.</p>
  </div>
</template>

<script>
  export default {
    name: &#39;TravelChinaPage&#39;
  }
</script>

<style scoped>

</style>

配置嵌套路由

现在，让我们同时更新 main.js 和 TravelPage.vue，以使用 children 来引用这些嵌套路由。必须将 main.js 更新为对 routes 常量具有以下定义：

const routes = [
  {
    path: '/travel', component: TravelPage,
    children: [
      { path: '/travel/america', component: TravelAmericaPage },
      { path: '/travel/china', component: TravelChinaPage}
    ]
  },
  {
    path: '/about', component: AboutPage
  }
];

请注意，子级的嵌套可以无限继续下去。

并且 TravelPage.vue 可以通过以下方式编写：

TravelPage.vue

<template>
  <div id="travel">
    <h2 class="row1">Travels</h2>
    <div class="flex-container row2">
      <router-link to="/travel/america">America</router-link>
      <router-link to="/travel/china">China</router-link>
    </div>
    <router-view class="row3"></router-view>
  </div>
</template>

<script>
  export default {
    name: &#39;TravelPage&#39;
  }
</script>

<style scoped>
div {
  text-align: center;
}

#travel {
  display: grid;
  grid-template-rows: 20% 40% 40%;
}

.flex-container {
  display: flex;
  justify-content: space-around;
}
</style>

检出 localhost:8080，你将看到 Travels 页面中包含 2 个子页面！当你单击任一链接时，我们的 URL 也会相应更新。

总结

希望本教程对你了解如何使用嵌套路由有帮助！

关于该主题的其他注意事项——我们可以使用动态段定义路由，例如 path:'/location/:id'。然后在这些路由的视图上，可以将该 id 引用为 this.$route.paramsrrreee

Wählen Sie an der Eingabeaufforderung die Standardvoreinstellung aus (drücken Sie die Eingabetaste). Führen Sie anschließend den folgenden Befehl aus:

rrreee

Öffnen Sie dann das Verzeichnis alligator-nest im Editor Ihrer Wahl.

Basiscode

Das folgende CSS hilft uns dabei, Elemente für die Benutzeroberfläche zu positionieren. Fügen Sie es als Stylesheet-Datei zum Ordner public/ hinzu und verweisen Sie darauf in public/index.html. Hierfür verwenden wir CSS Grid

:

grid.css
rrreee

Als nächstes nehmen wir einige Änderungen an der von vue-cli hinzugefügten Standarddatei vor.

Löschen Sie HelloWorld.vue aus dem Ordner src/components und löschen Sie alles, was damit zusammenhängt, aus src/App.vue. Nehmen Sie die folgenden Änderungen am HTML-Markup und den CSS-Stilen in App.vue vor. rrreee

Wenn Sie npm run servo im Stammverzeichnis Ihres Projekts ausführen, können Sie in Ihrem Browser mit der Maus über localhost:8080 fahren und das Frame-Layout sehen. Diese display:grid-Attribute sind nützlich! Jetzt können wir mit der Erstellung von Routen beginnen.

Geben Sie die Vue-Route ein. Erstellen Sie eine Komponente mit dem Namen AboutPage.vue im Ordner /components. Es sieht so aus: rrreee

Jetzt benötigt unsere Datei main.js die Route /about. Es sieht so aus.

rrreeeZuletzt kehren wir zu App.vue zurück und ändern den Ankertag „About“ in < mit dem Attribut to="/about" ;router -link>-Tag. Ändern Sie dann das zweite div in ein <router-view>-Tag. Stellen Sie sicher, dass die Eigenschaften der Rasterpositionierungsklasse unverändert bleiben.
Jetzt haben wir ein voll funktionsfähiges Website-Gerüst mit Routing für die „Über“-Seite.

🎜Wir konzentrieren uns hier auf die Routing-Funktion, sodass wir nicht zu viel Zeit mit dem Stil verbringen. Dennoch möchten wir, dass die Seite Reisen etwas ausgefeilter aussieht. 🎜

---

🎜Erstellen Sie zunächst eine Reiseseite auf die gleiche Weise wie beim Erstellen einer AboutPage. Verweisen Sie darauf in main.js. 🎜🎜Sie müssen außerdem die folgenden zwei Komponenten erstellen, die schließlich in TravelPage.vue verschachtelt werden: 🎜🎜TravelAmericaPage.vue🎜rrreee🎜TravelChinaPage.vue 🎜rrreee

Verschachteltes Routing konfigurieren

🎜Jetzt aktualisieren wir sowohl main.js als auch TravelPage.vue , um <code>children zu verwenden, um auf diese verschachtelten Routen zu verweisen. main.js muss aktualisiert werden, um die folgende Definition für die routes-Konstante zu haben: 🎜rrreee🎜Bitte beachten Sie, dass die Verschachtelung von untergeordneten Elementen unbegrenzt fortgesetzt werden kann. 🎜🎜Und TravelPage.vue kann geschrieben werden mit: 🎜🎜TravelPage.vue🎜rrreee🎜Schauen Sie sich localhost:8080 an und Sie werden sehen Die Reiseseite enthält 2 Unterseiten! Wenn Sie auf einen Link klicken, wird unsere URL entsprechend aktualisiert. 🎜

Zusammenfassung🎜🎜Ich hoffe, dieses Tutorial ist hilfreich, damit Sie verstehen, wie Sie verschachteltes Routing verwenden! 🎜🎜Noch ein Hinweis zu diesem Thema: Wir können Routen mithilfe dynamischer Segmente definieren, z. B. path:'/location/:id'. Diese ID kann dann in den Ansichten für diese Routen als this.$route.params referenziert werden. Diese Funktion ist nützlich, wenn Sie spezifischere Datentypen (Benutzer, Bilder usw.) auf Websites und Apps anzeigen möchten. 🎜🎜🎜Englische Originaladresse: https://alligator.io/vuejs/nested-routes/🎜🎜Übersetzungsadresse: https://segmentfault.com/a/1190000021930656🎜🎜🎜🎜Verwandte Empfehlungen: 🎜🎜🎜🎜Zusammenfassung 2020 von Front-End-Vue-Interviewfragen (mit Antworten) 🎜🎜🎜🎜Vue-Tutorial-Empfehlung: 2020 neueste 5 vue.js-Video-Tutorial-Auswahl 🎜🎜🎜🎜Weitere programmierbezogene Kenntnisse finden Sie unter: 🎜Einführung in die Programmierung🎜! ! 🎜🎜

Das obige ist der detaillierte Inhalt vonEinführung in die Methode zur Verwendung von verschachteltem Routing in Vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!