前面已經把首頁的頂部header和底部的footer頁面寫完，現在開始寫內容區域了，在寫內容之前我們先要將路由配置好，不然無法在頁面上查看效果，所以這里我在components目錄下先建了一個home.vue文件，里面簡單的寫了一句“我是主頁中的內容，通過路由router-view嵌套進來的”，然后加了個樣式方便查看。

這里簡單的說下，我們在main.js中引入vue-router組件把 Vue Router 添加進來，然后創建router 實例并傳 `routes` 配置(routes不能寫錯哦)，最后再把router掛在到vue項目中去，以上操作都可以在main.js中完成。

不過這里我為了更好的管理項目我把 router分離開來了，放在一個單獨的router文件夾進行管理了，前面我已經對vue如何配置路由已經做了詳解，大家可以參考：vue實戰開發007:vue引入Element-UI并配置路由 ，這里是按照我項目來配置的路由，僅供參考。vue實戰開發007:vue引入Element-UI并配置路由

我在寫index.vue頁面的時候，因為在我們通常瀏覽的把頁面分網頁中底部和底部基本是不會變化的，所以這里我把頁面成了3個部分，頂部、內容和底部，頂部和底部直接通過組件的形式引入了進來，而內容區域則是用router-view定義的，后續所有的子頁內容我都把它指向這里，實現局部刷新。

既然要把子頁都匹配到這里，我們就要在路由中進行綁定，實現的方法很簡單，只要在你需要拓展子路由的那個路由中添加子路由即可與當前路由進行綁定了，這里需要注意的是以“/”開頭的嵌套路徑會被當作根路徑，所以子路由上可以不用加“/”(當然加也能被識別)，children 配置跟 routes 配置方法一樣，都是以數組形式來配置來配置路由信息的。

訪問的時候我們只要在主頁后面加上對應的子頁路徑就可以實現訪問了，因為在生成路由時，主路由上的path會被自動添加到子路由之前，這里因為我是index主頁，所以我們把路徑直接設置為空，這樣我們直接訪問http://localhost:8080/index 就可以訪問到router-view中的內容了。

隨著我們內容的增加，我們可以不斷的擴充children中的路由，你頁可以在子頁中再次嵌套router-view，并在路由中實現多重路由嵌套。

總結

以上是生活随笔為你收集整理的unity 3d shaderlab 开发实战详解_vue实战开发011:使用router-view嵌套路由详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。