vue-router 是 Vue.js 官方的路由插件，它和 vue.js 是深度集成的，適合用于構(gòu)建 SPA 單頁(yè)面應(yīng)用。vue 的單頁(yè)面應(yīng)用是基于路由和組件的，相當(dāng)于傳統(tǒng)頁(yè)面是基于 <a> 標(biāo)簽鏈接和頁(yè)面，路由用于設(shè)定訪問路徑，并將路徑和組件映射起來(lái)，這樣就可以實(shí)現(xiàn)通過由 router 來(lái)切換組件（視圖）。

第一步：安裝 vue-router

<script src="js/vue2.0.js"></script>
<script src="js/vue-router.js"></script>

第二步：準(zhǔn)備組件

<div id="app">
  <!-- 左側(cè)導(dǎo)航欄區(qū)域 -->
  <div class="nav">
    <a>HTML</a>
    <a>CSS</a>
    <a>JavaScript</a>
  </div>
            
  <!-- 右側(cè)內(nèi)容區(qū)域 -->
  <div class="content"></div>
</div>

現(xiàn)在我們修改為 vue-router 方式。這里就要介紹 vue-router 給我們提供的兩個(gè)新組件：router-link 和 router-view，router-link 組件用于幫助用戶進(jìn)行視圖導(dǎo)航，也就是我們傳統(tǒng)的 a 標(biāo)簽，a 標(biāo)簽用 href 屬性來(lái)指定導(dǎo)航的目標(biāo)地址，而 router-link 組件則用 to 屬性來(lái)指定目標(biāo)地址。

注意：vue-router 1.0 的導(dǎo)航語(yǔ)法是給 a 標(biāo)簽添加 v-link 屬性。我們這里只介紹 vue-router 2.0 的用法。

router-view 組件負(fù)責(zé)渲染匹配到的視圖組件，也就是渲染 router-link 指向的目標(biāo)地址。
代碼修改如下：

<div id="app">
  <!-- 使用 router-link 組件來(lái)導(dǎo)航 -->
  <!-- 通過傳入 'to' 屬性指定導(dǎo)航鏈接 -->
  <div class="nav">
    <router-link to="/html">HTML</router-link>
    <router-link to="/css">CSS</router-link>
    <router-link to="/js">JavaScript</router-link>
  </div>
            
  <!-- 右側(cè)內(nèi)容區(qū)域 -->
  <div class="content">
    <!-- 匹配到的組件將渲染在這里 -->
    <router-view></router-view>
  </div>
</div>

我們用 router-link 來(lái)替換原來(lái)的 a 標(biāo)簽，原來(lái)的 <div class="content"></div> 里面增加了 router-view 組件。

接下來(lái)，我們來(lái)編寫 JavaScript 部分的代碼。

首先，我們的導(dǎo)航中有三個(gè)欄目：

• HTML
• CSS
• JavaScript

它們會(huì)導(dǎo)航指向 3 個(gè)對(duì)應(yīng)的視圖組件，下面來(lái)定義 3 個(gè)組件。

const htmlComponent = {
  template:`<div>HTML</div>`
}
const cssComponent = {
  template:`<div>CSS</div>`
}
const jsComponent = {
  template:`<div>JavaScript</div>`
}

語(yǔ)法很簡(jiǎn)單，用 json 對(duì)象的形式定義，至于 template 屬性對(duì)應(yīng)的內(nèi)容，就是將會(huì)被替換渲染到 router-view 組件的內(nèi)容了。
接下來(lái)我們可以直接創(chuàng)建一個(gè) router 實(shí)例，創(chuàng)建實(shí)例的時(shí)候我們需要傳參數(shù) routes 來(lái)進(jìn)行配置，這樣就可以實(shí)現(xiàn)定義它們之間的關(guān)聯(lián)關(guān)系了。

// 創(chuàng)建 router 實(shí)例，并定義導(dǎo)航和組件的映射關(guān)系
const router = new VueRouter({
  // 配置 routes
  routes: [
    // 定義 3 個(gè)導(dǎo)航和組件的映射關(guān)系
    {
      path:"/html",
      component:htmlComponent,
    },
    {
      path:"/css",
      component:cssComponent,
    },
    {
      path:"/js",
      component:jsComponent,
    }
  ]
})

注意：routes 的值是個(gè)數(shù)組類型，數(shù)組中每個(gè)元素是對(duì)象類型。

最后是創(chuàng)建一個(gè) vue 實(shí)例，創(chuàng)建的時(shí)候通過配置 router 參數(shù)來(lái)注入我們剛剛定義好的 router 路由。

let vm = new Vue({
  el: '#app',
  router
})

效果如下：

效果圖.png

當(dāng)點(diǎn)擊 CSS 導(dǎo)航時(shí)，效果如下：

效果圖.png