前面(mian)已經把(ba)首頁的頂(ding)部header和(he)底部的footer頁面(mian)寫(xie)完，現(xian)在開始寫(xie)內容(rong)區(qu)域了(le)，在寫(xie)內容(rong)之(zhi)前我們先(xian)要(yao)將路(lu)由配置好，不然無法在頁面(mian)上(shang)查(cha)看效果，所以這里我在components目(mu)錄(lu)下先(xian)建了(le)一(yi)個home.vue文件，里面(mian)簡單(dan)的寫(xie)了(le)一(yi)句“我是(shi)主頁中的內容(rong)，通過路(lu)由router-view嵌套進來(lai)的”，然后加了(le)個樣(yang)式(shi)方便查(cha)看。

這里(li)簡單的(de)說下，我們(men)在(zai)main.js中引入vue-router組件(jian)把 Vue Router 添(tian)加進來(lai)，然(ran)后(hou)創建router 實例并(bing)傳 `routes` 配(pei)置（routes不能寫錯(cuo)哦），最(zui)后(hou)再(zai)把router掛在(zai)到vue項(xiang)目中去，以上操作都可以在(zai)main.js中完成(cheng)。

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

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

既然要(yao)(yao)把子(zi)頁都(dou)匹配到這里，我們(men)就要(yao)(yao)在路(lu)(lu)(lu)由(you)中(zhong)進行綁定，實現的方法(fa)很簡單，只要(yao)(yao)在你需要(yao)(yao)拓展(zhan)子(zi)路(lu)(lu)(lu)由(you)的那個路(lu)(lu)(lu)由(you)中(zhong)添加子(zi)路(lu)(lu)(lu)由(you)即可與當前路(lu)(lu)(lu)由(you)進行綁定了，這里需要(yao)(yao)注(zhu)意的是以(yi)(yi)“/”開頭的嵌(qian)套(tao)路(lu)(lu)(lu)徑(jing)會被當作(zuo)根路(lu)(lu)(lu)徑(jing)，所以(yi)(yi)子(zi)路(lu)(lu)(lu)由(you)上可以(yi)(yi)不(bu)用(yong)加“/”（當然加也能被識別(bie)），children 配置跟 routes 配置方法(fa)一樣(yang)，都(dou)是以(yi)(yi)數組形式來配置來配置路(lu)(lu)(lu)由(you)信息(xi)的。

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

隨著我(wo)們內(nei)容(rong)的(de)增加，我(wo)們可(ke)以不斷的(de)擴充children中(zhong)的(de)路由，你頁可(ke)以在子頁中(zhong)再(zai)次(ci)嵌套(tao)(tao)router-view，并在路由中(zhong)實現多重路由嵌套(tao)(tao)。