什么是路由
路由這個(gè)概念最先是后端出現(xiàn)的。通過(guò)服務(wù)器渲染友扰，直接返回頁(yè)面批糟。
其響應(yīng)過(guò)程是這樣的
- 瀏覽器發(fā)出請(qǐng)求
- 服務(wù)器監(jiān)聽(tīng)到80端口（或443）有請(qǐng)求過(guò)來(lái)，并解析url路徑
- 根據(jù)服務(wù)器的路由配置蜀撑，返回相應(yīng)信息
- 瀏覽器根據(jù)數(shù)據(jù)包的
Content-Type來(lái)決定如何解析數(shù)據(jù)
路由的作用
路由就是用來(lái)跟服務(wù)器進(jìn)行交互的一種方式挤巡，通過(guò)不同的路徑，來(lái)請(qǐng)求不同的資源酷麦。
Vue-router
原理就是檢測(cè) url 的變化矿卑，截獲 url 地址，然后解析來(lái)匹配路由規(guī)則沃饶。
但是每次改變url都會(huì)去刷新頁(yè)面母廷，所以通過(guò) hash 來(lái)實(shí)現(xiàn)路由。hash 值的變化糊肤，并不會(huì)導(dǎo)致瀏覽器向服務(wù)器發(fā)出請(qǐng)求琴昆，瀏覽器不發(fā)出請(qǐng)求，也就不會(huì)刷新頁(yè)面馆揉。另外每次 hash 值的變化椎咧，還會(huì)觸發(fā) hashchange 這個(gè)事件，通過(guò)這個(gè)事件我們就可以知道 hash 值發(fā)生了哪些變化。
<div id="app">
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
<router-view><router-view>
</div>
router-link其實(shí)就是一個(gè)不會(huì)頁(yè)面跳轉(zhuǎn)的a標(biāo)簽勤讽，會(huì)在url上加上hash
類似
http://192.168.1.100:8081/src/lizi.html#/foo
#后面就是hash
router-view標(biāo)簽會(huì)根據(jù)路由的配置把相應(yīng)的組件給渲染出來(lái)蟋座，并替換掉router-view標(biāo)簽。
<script src="./vendor/vue.min.js"></script>
<script src="./vendor/vue-router.min.js"></script>
首先在引入vue后再引入vue-router
//定義兩個(gè)組件對(duì)象
let Foo = { template: '<div>foo</div>'}
let Bar = { template: '<div>bar</div>'}
//定義路由
let routes = [{ path: "/foo", component: Foo}, { path: "/bar", component: Bar}]
//創(chuàng)建 router 實(shí)例脚牍，然后傳 `routes` 配置
let router = new VueRouter({
routes: routes
})
//創(chuàng)建和掛載根實(shí)例向臀，通過(guò) router 配置參數(shù)注入路由
let app = new Vue({
el: "#app",
router: router
})
