隨著 Vue.js 單頁應用程式（SPA）變得相當複雜，你開始需要 Vue 路由以及巢狀路由。嵌套路由允許更複雜的使用者介面以及相互嵌套的元件。讓我們建立一個相對簡單的用例，來展示 Vue Router 中嵌套路由的實用性。
如果尚未安裝，請執行以下指令全域安裝Vue CLI：
$ npm install -g @vue/cli
或
$ yarn global add @vue/cli
現在你能從指令行運行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" 的<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: '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。當你希望在網站和應用程式上顯示更多特定類型的資料（使用者、圖片等）時，此功能非常有用。
英文原文網址：https://alligator.io/vuejs/nested-routes/
譯本網址：https://segmentfault.com/a/1190000021930656
相關推薦：
更多程式相關知識，請造訪：程式設計入門！ ！
以上是Vue.js中使用巢狀路由的方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
