一贡翘、前言

要學(xué)習(xí)vue-router就要知道這里的路由是什么？為什么我們不能像原來(lái)一樣直接用標(biāo)簽寫(xiě)鏈接砰逻？vue-router如何使用鸣驱？常見(jiàn)路由操作有哪些？

二蝠咆、vue-router是什么

這里的路由是spa（單頁(yè)應(yīng)用）的路徑管理器踊东。再通俗的說(shuō)，vue-router就是WebApp的鏈接路徑管理系統(tǒng)刚操。
vue-router是Vue.js官方的路由插件闸翅，它和vue.js是深度集成的，適用于構(gòu)建單頁(yè)面應(yīng)用菊霜。vue的單頁(yè)面應(yīng)用是基于路由和組件的坚冀，路由用于設(shè)定訪問(wèn)路徑，并將路徑和組件映射起來(lái)鉴逞。傳統(tǒng)的頁(yè)面應(yīng)用记某，是用一些超鏈接來(lái)實(shí)現(xiàn)頁(yè)面的切換和跳轉(zhuǎn)的。在vue-router單頁(yè)面應(yīng)用中构捡，則是路徑之間的切換液南，也就是組件的切換。路由模塊的本質(zhì) 就是建立起url和頁(yè)面之間的映射關(guān)系叭喜。

至于我們?yōu)樯?不使用a標(biāo)簽贺拣，這是因?yàn)橛肰ue做的都是單頁(yè)應(yīng)用（當(dāng)你的項(xiàng)目準(zhǔn)備打包時(shí)，運(yùn)行 npm run build時(shí)，就會(huì)生成dist文件夾譬涡，這里面只有靜態(tài)資源和一個(gè)index.html頁(yè)面）闪幽，所以你寫(xiě)的標(biāo)簽是不起作用的，你必須使用vue-router來(lái)進(jìn)行管理涡匀。

三盯腌、vue-router實(shí)現(xiàn)原理

SPA(single page application):單一頁(yè)面應(yīng)用程序，只有一個(gè)完整的頁(yè)面陨瘩；它在加載頁(yè)面時(shí)腕够，不會(huì)加載整個(gè)頁(yè)面，而是只更新某個(gè)指定的容器中內(nèi)容舌劳。單頁(yè)面應(yīng)用(SPA)的核心之一是: 更新視圖而不重新請(qǐng)求頁(yè)面;vue-router在實(shí)現(xiàn)單頁(yè)面前端路由時(shí)帚湘，提供了兩種方式：Hash模式和History模式；根據(jù)mode參數(shù)來(lái)決定采用哪一種方式甚淡。

1大诸、Hash模式：

vue-router 默認(rèn) hash 模式 —— 使用 URL 的 hash 來(lái)模擬一個(gè)完整的 URL，于是當(dāng) URL 改變時(shí)贯卦，頁(yè)面不會(huì)重新加載资柔。 hash（#）是URL 的錨點(diǎn)，代表的是網(wǎng)頁(yè)中的一個(gè)位置撵割，單單改變#后的部分贿堰，瀏覽器只會(huì)滾動(dòng)到相應(yīng)位置，不會(huì)重新加載網(wǎng)頁(yè)啡彬，也就是說(shuō)hash 出現(xiàn)在 URL 中羹与，但不會(huì)被包含在 http 請(qǐng)求中，對(duì)后端完全沒(méi)有影響外遇，因此改變 hash 不會(huì)重新加載頁(yè)面注簿；同時(shí)每一次改變#后的部分契吉，都會(huì)在瀏覽器的訪問(wèn)歷史中增加一個(gè)記錄跳仿，使用”后退”按鈕，就可以回到上一個(gè)位置捐晶；所以說(shuō)Hash模式通過(guò)錨點(diǎn)值的改變菲语，根據(jù)不同的值，渲染指定DOM位置的不同數(shù)據(jù)惑灵。hash 模式的原理是 onhashchange 事件(監(jiān)測(cè)hash值變化)山上，可以在 window 對(duì)象上監(jiān)聽(tīng)這個(gè)事件。

2英支、History模式：

由于hash模式會(huì)在url中自帶#佩憾，如果不想要很丑的 hash，我們可以用路由的 history 模式，只需要在配置路由規(guī)則時(shí)妄帘，加入"mode: 'history'",這種模式充分利用了html5 history interface 中新增的 pushState() 和 replaceState() 方法楞黄。這兩個(gè)方法應(yīng)用于瀏覽器記錄棧，在當(dāng)前已有的 back抡驼、forward鬼廓、go 基礎(chǔ)之上，它們提供了對(duì)歷史記錄修改的功能致盟。只是當(dāng)它們執(zhí)行修改時(shí)碎税，雖然改變了當(dāng)前的 URL ，但瀏覽器不會(huì)立即向后端發(fā)送請(qǐng)求馏锡。

//main.js文件中
const router = new VueRouter({
  mode: 'history',
  routes: [...]
}) 

當(dāng)你使用 history 模式時(shí)雷蹂，URL 就像正常的 url，例如 http://yoursite.com/user/id杯道，比較好看萎河！
不過(guò)這種模式要玩好，還需要后臺(tái)配置支持蕉饼。因?yàn)槲覀兊膽?yīng)用是個(gè)單頁(yè)客戶端應(yīng)用虐杯，如果后臺(tái)沒(méi)有正確的配置，當(dāng)用戶在瀏覽器直接訪問(wèn) http://oursite.com/user/id 就會(huì)返回 404昧港，這就不好看了擎椰。
所以呢，你要在服務(wù)端增加一個(gè)覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態(tài)資源创肥，則應(yīng)該返回同一個(gè) index.html 頁(yè)面达舒，這個(gè)頁(yè)面就是你 app 依賴(lài)的頁(yè)面。

 export const routes = [ 
  {path: "/", name: "homeLink", component:Home}
  {path: "/register", name: "registerLink", component: Register},
  {path: "/login", name: "loginLink", component: Login},
  {path: "*", redirect: "/"}]

此處就設(shè)置如果URL輸入錯(cuò)誤或者是URL 匹配不到任何靜態(tài)資源叹侄，就自動(dòng)跳到到Home頁(yè)面

3.使用路由模塊來(lái)實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)的方式

方式1：直接修改地址欄
方式2：this.$router.push(‘路由地址’)
方式3：<router-link to="路由地址"></router-link>

四巩搏、vue-router核心要點(diǎn)

1.vue-router參數(shù)傳遞

聲明式的導(dǎo)航<router-link :to="...">和編程式的導(dǎo)航router.push(...)都可以傳參，本文主要介紹前者的傳參方法趾代，同樣的規(guī)則也適用于編程式的導(dǎo)航贯底。

①用name傳遞參數(shù)

在路由文件src/router/index.js里配置name屬性

routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    }
]

模板里(src/App.vue)用$route.name來(lái)接收

②通過(guò)<router-link> 標(biāo)簽中的to傳參

基本語(yǔ)法：
<router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>
比如先在src/App.vue文件中
<router-link :to="{name:'hi1',params:{username:'jspang',id:'555'}}">Hi頁(yè)面1</router-link>
然后把src/router/index.js文件里給hi1配置的路由起個(gè)name,就叫hi1.
{path:'/hi1',name:'hi1',component:Hi1}
最后在模板里(src/components/Hi1.vue)用$route.params.username進(jìn)行接收.
{{$route.params.username}}-{{$route.params.id}}

③vue-router 利用url傳遞參數(shù)----在配置文件里以冒號(hào)的形式設(shè)置參數(shù)。

我們?cè)?src/router/index.js文件里配置路由

{
    path:'/params/:newsId/:newsTitle',
    component:Params
}

我們需要傳遞參數(shù)是新聞ID（newsId）和新聞標(biāo)題（newsTitle）.所以我們?cè)诼酚膳渲梦募镏贫诉@兩個(gè)值撒强。
在src/components目錄下建立我們params.vue組件禽捆，也可以說(shuō)是頁(yè)面。我們?cè)陧?yè)面里輸出了url傳遞的的新聞ID和新聞標(biāo)題飘哨。

<template>
    <div>
        <h2>{{ msg }}</h2>
        <p>新聞ID：{{ $route.params.newsId}}</p>
        <p>新聞標(biāo)題：{{ $route.params.newsTitle}}</p>
    </div>
</template>
<script>
export default {
  name: 'params',
  data () {
    return {
      msg: 'params page'
    }
  }
}
</script>

在App.vue文件里加入我們的<router-view>標(biāo)簽胚想。這時(shí)候我們可以直接利用url傳值了
<router-link to="/params/198/jspang website is very good">params</router-link>

④使用path來(lái)匹配路由，然后通過(guò)query來(lái)傳遞參數(shù)

<router-link :to="{ name:'Query',query: { queryId:  status }}" >
     router-link跳轉(zhuǎn)Query
</router-link>

對(duì)應(yīng)路由配置：

   {
     path: '/query',
     name: 'Query',
     component: Query
   }

于是我們可以獲取參數(shù)：
this.$route.query.queryId

2.單頁(yè)面多路由區(qū)域操作

在一個(gè)頁(yè)面里我們有2個(gè)以上<router-view>區(qū)域芽隆，我們通過(guò)配置路由的js文件浊服，來(lái)操作這些區(qū)域的內(nèi)容

①App.vue文件统屈，在<router-view>下面新寫(xiě)了兩行<router-view>標(biāo)簽,并加入了些CSS樣式

<template>
  <div id="app">
    <img src="./assets/logo.png">
       <router-link :to="{name:'HelloWorld'}"><h1>H1</h1></router-link>
       <router-link :to="{name:'H1'}"><h1>H2</h1></router-link>
    <router-view></router-view>
    <router-view name="left" style="float:left;width:50%;background-color:#ccc;height:300px;"/>
    <router-view name="right" style="float:right;width:50%;background-color:yellowgreen;height:300px;"/>
  </div>
</template>

②需要在路由里配置這三個(gè)區(qū)域，配置主要是在components字段里進(jìn)行

export default new Router({
    routes: [
      {
        path: '/',
        name: 'HelloWorld',
        components: {default: HelloWorld,
          left:H1,//顯示H1組件內(nèi)容'I am H1 page,Welcome to H1'
          right:H2//顯示H2組件內(nèi)容'I am H2 page,Welcome to H2'
        }
      },
      {
        path: '/h1',
        name: 'H1',
        components: {default: HelloWorld,
          left:H2,//顯示H2組件內(nèi)容
          right:H1//顯示H1組件內(nèi)容
        }
      }
    ]
  })

上邊的代碼我們編寫(xiě)了兩個(gè)路徑牙躺，一個(gè)是默認(rèn)的‘/’鸿吆，另一個(gè)是‘/Hi’.在兩個(gè)路徑下的components里面，我們對(duì)三個(gè)區(qū)域都定義了顯示內(nèi)容述呐。

3.嵌套路由

routes: [
   {
     path: '/',
     name: 'HelloWorld',
     component: HelloWorld,
     children: [{path: '/h1', name: 'H1', component: H1},//子路由的<router-view>必須在HelloWorld.vue中出現(xiàn)
       {path: '/h2', name: 'H2', component: H2}
     ]
   }
 ]

4. router的區(qū)別

$route 是“路由信息對(duì)象”惩淳，包括 path，params乓搬，hash思犁，query，fullPath进肯，matched激蹲，name 等路由信息參數(shù)。

① $route.path
字符串江掩，對(duì)應(yīng)當(dāng)前路由的路徑学辱，總是解析為絕對(duì)路徑，如 "/order"环形。

② $route.params
一個(gè) key/value 對(duì)象策泣，包含了 動(dòng)態(tài)片段 和 全匹配片段，
如果沒(méi)有路由參數(shù)抬吟，就是一個(gè)空對(duì)象萨咕。

③ $route.query
一個(gè) key/value 對(duì)象，表示 URL 查詢參數(shù)火本。
例如危队，對(duì)于路徑 /foo?user=1，則有 $route.query.user為1钙畔，
如果沒(méi)有查詢參數(shù)茫陆，則是個(gè)空對(duì)象。

④$route.hash
當(dāng)前路由的 hash 值 (不帶 #) 擎析，如果沒(méi)有 hash 值簿盅，則為空字符串。

⑤ $route.fullPath
完成解析后的 URL叔锐，包含查詢參數(shù)和 hash 的完整路徑挪鹏。

⑥ $route.matched
數(shù)組，包含當(dāng)前匹配的路徑中所包含的所有片段所對(duì)應(yīng)的配置參數(shù)對(duì)象愉烙。

⑦ $route.name 當(dāng)前路徑名字

$router 是“路由實(shí)例”對(duì)象，即使用 new VueRouter創(chuàng)建的實(shí)例解取，包括了路由的跳轉(zhuǎn)方法步责，鉤子函數(shù)等。

5. 404頁(yè)面的設(shè)置

用戶會(huì)經(jīng)常輸錯(cuò)頁(yè)面，當(dāng)用戶輸錯(cuò)頁(yè)面時(shí)蔓肯，我們希望給他一個(gè)友好的提示頁(yè)面遂鹊，這個(gè)頁(yè)面就是我們常說(shuō)的404頁(yè)面。vue-router也為我們提供了這樣的機(jī)制蔗包。
①設(shè)置我們的路由配置文件（/src/router/index.js）

{
   path:'*',
   component:Error
}

這里的path:'*'就是輸入地址不匹配時(shí)秉扑，自動(dòng)顯示出Error.vue的文件內(nèi)容

②在/src/components/文件夾下新建一個(gè)Error.vue的文件。簡(jiǎn)單輸入一些有關(guān)錯(cuò)誤頁(yè)面的內(nèi)容调限。

<template>
    <div>
        <h2>{{ msg }}</h2>
    </div>
</template>
<script>
export default {
  data () {
    return {
      msg: 'Error:404'
    }
  }
}
</script>

此時(shí)我們隨意輸入一個(gè)錯(cuò)誤的地址時(shí)舟陆，便會(huì)自動(dòng)跳轉(zhuǎn)到404頁(yè)面