vue-router是官方提供的路由工具庫(kù)。
????將單頁(yè)程序分割為各自功能合理的組件或者頁(yè)面，路由起到連接單頁(yè)程序中各頁(yè)面之間的鏈條。
安裝
????vue-router是一個(gè)Vue插件，需要在Vue全局引用中通過(guò)Vue.use()接入到Vue實(shí)例中八秃。
路由配置
? ? vue-router配合組件形成各種的"頁(yè)面"。頁(yè)面是一個(gè)抽象的概念肉盹，用于劃分場(chǎng)景昔驱，組件是頁(yè)面在Vue的具體實(shí)現(xiàn)方式。
????? 新建一個(gè)js文件專門(mén)配置路由（方便我們維護(hù)）：
? ? 導(dǎo)出一個(gè)VueRouter實(shí)例上忍，將path路由指定組件路徑骤肛，base:_dirname是設(shè)置我們的基路徑。
????創(chuàng)建VueRouter實(shí)例時(shí)用了mode：history的參數(shù)窍蓝。意為使用history模式腋颠，該模式利用history.pushState API來(lái)完成URL的跳轉(zhuǎn)還無(wú)需重新加載界面。如果不使用history模式吓笙，當(dāng)訪問(wèn)home的時(shí)候地址就會(huì)變?yōu)椋?/p>
http://localhost/#home
????反之為：
http://localhost//home
? ? 這就是history模式和hash模式的區(qū)別了淑玫，其實(shí)有三種模式(⊙o⊙)…
跑遠(yuǎn)了跑遠(yuǎn)了。面睛。絮蒿。
????接著說(shuō)component指定組件，name是我們用的“命名路由”叁鉴，就是通過(guò)路由的名稱取代url的直接引用土涝，這樣如果變更可以最簡(jiǎn)化我們的維護(hù)。
? ? demo中我創(chuàng)建了貓狗魚(yú)豬4個(gè)組件幌墓，都以這個(gè)結(jié)構(gòu)創(chuàng)建
????在<router-link>內(nèi)通過(guò)名稱引入路由需要向to屬性傳入一個(gè)對(duì)象顯示聲明路由的名稱:
? ? vue-router提供了兩個(gè)指令來(lái)處理導(dǎo)航和自動(dòng)渲染邏輯：
????按照這個(gè)規(guī)則但壮，我們?cè)贏pp.vue中修改頁(yè)面冀泻，配置路由導(dǎo)航和渲染的視圖組件。
????finally蜡饵，我們npm run dev跑一下
????點(diǎn)擊item會(huì)觸發(fā)該item的router-link繼而導(dǎo)航弹渔，渲染router-view組件展示，剛才點(diǎn)擊了小豬組件验残，router-view渲染出了Pig.vue組件~
（￣︶￣）↗
