Heim > Artikel > Web-Frontend > 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.
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
属性很有用!现在我们可以开始创建路由了。
在 /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: 'AboutPage', } </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"
的 b988a8fd72e5e0e42afffd18f951b277
标签。然后,将第二个 div
更改为 975b587bf85a482ea10b0a28848e78a4
标签。确保保持网格定位类属性不变。
现在,我们有了一个功能齐全的站点框架,并为 “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: 'TravelAmericaPage' } </script> <style scoped> </style>
TravelChinaPage.vue
<template> <div> <p>Alligators can be found in China's Yangtze River Valley.</p> </div> </template> <script> export default { name: 'TravelChinaPage' } </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: 'TravelPage' } </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.params
rrreee
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 Ordnerpublic/
hinzu und verweisen Sie darauf inpublic/index.html
. Hierfür verwenden wir CSS Grid
Jetzt benötigt unsere Dateigrid.css
Als nächstes nehmen wir einige Änderungen an der von
rrreeevue-cli
hinzugefügten Standarddatei vor. Wenn Sienpm run servo
im Stammverzeichnis Ihres Projekts ausführen, können Sie in Ihrem Browser mit der Maus überlocalhost:8080
fahren und das Frame-Layout sehen. Diesedisplay: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
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
-Tag. Ändern Sie dann das zweite to="/about"
;router -link>div
in ein 975b587bf85a482ea10b0a28848e78a4
-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.
Reisen
etwas ausgefeilter aussieht. 🎜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 🎜rrreeemain.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. 🎜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!