router 根據URL分配到對應的處理程序
單應用頁面，vue開發中只有一個一面
例如我們在開發移動端的時候，正常情況下底部的tab有四個選項：
首頁 home
發現 find
訂單 order
我的 my
針對於四個頁面，是有四個組件作支撐
比如說我們在components中建立一個文件夾，建立四個組件，組件中都是
template script style 三個層分別創建好
當我們建立四個頁面之后，就要去分析頁面，作為底部tab導航他其實在四個頁面中都存在，是不需要改變的，但是作為內容中心層，每個頁面都不一樣，我們可以把底部導航寫入一個組件。新建一個NavBottom.vue作為底部導航公用部分.
NavBottom.vue
第一步：點擊對面的進行頁面跳轉
路由中有兩個屬性，<router-link to="/home"> </router-link>,就相當於a鏈接,to就是跳轉地址。
第二部：路由index.中配置，我們需要import引入，只需要在：
important Home from "@/components/Home"
important Find from "@/components/Find"
important Order from "@/components/Order"
important My from "@/components/My"
export derault new Router({
routes:[
{
path:"/home",
component:"Home"
},
{
path:"/find",
component:"Find"
},
{
path:"/order",
component:"Order"
},
{
path:"/my",
component:"My"
},
]
})
這時候，因為我們創建了底部導航組件，我們想要通過引入css來控制，而不是直接寫在style中，我們可以通過一下方式解決問題：
在App.vue style中：
@import "./assets/path...."
如果想要樣式對立起來，直接在style 標簽中加入一個屬性scoped就可以了。
如果我們點擊不同的底部按鈕，變換顏色，我們可以在NavBottom中寫入一個.active樣式，然后我們在router index.js中 導入linkActiveClass:"active", 我們切換就可以隨意的變換顏色了。
注：我們平常在開發的過程中，盡量不要使用圖片作為字體圖標，我們可以直接使用ui框架中的字體圖標就可以了。
全局的就在main.js 中引入，單個組件的引入就在相應的文件引入就行。