什么是路由

路由這個概念最先是后端出現(xiàn)的。通過服務(wù)器渲染，直接返回頁面。
其響應(yīng)過程是這樣的

1. 瀏覽器發(fā)出請求
2. 服務(wù)器監(jiān)聽到80端口（或443）有請求過來，并解析url路徑
3. 根據(jù)服務(wù)器的路由配置，返回相應(yīng)信息
4. 瀏覽器根據(jù)數(shù)據(jù)包的Content-Type來決定如何解析數(shù)據(jù)

路由的作用

路由就是用來跟服務(wù)器進(jìn)行交互的一種方式，通過不同的路徑，來請求不同的資源。

Vue-router

原理就是檢測 url 的變化，截獲 url 地址，然后解析來匹配路由規(guī)則。
但是每次改變url都會去刷新頁面，所以通過 hash 來實現(xiàn)路由。hash 值的變化，并不會導(dǎo)致瀏覽器向服務(wù)器發(fā)出請求，瀏覽器不發(fā)出請求，也就不會刷新頁面。另外每次 hash 值的變化，還會觸發(fā) hashchange 這個事件，通過這個事件我們就可以知道 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其實就是一個不會頁面跳轉(zhuǎn)的a標(biāo)簽，會在url上加上hash
類似

http://192.168.1.100:8081/src/lizi.html#/foo

#后面就是hash
router-view標(biāo)簽會根據(jù)路由的配置把相應(yīng)的組件給渲染出來，并替換掉router-view標(biāo)簽。

<script src="./vendor/vue.min.js"></script>
<script src="./vendor/vue-router.min.js"></script>

首先在引入vue后再引入vue-router

//定義兩個組件對象
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 實例，然后傳 `routes` 配置
let router = new VueRouter({
  routes: routes
})
//創(chuàng)建和掛載根實例，通過 router 配置參數(shù)注入路由
let app = new Vue({
  el: "#app",
  router: router
})