VueRouter系列的文章示例編寫時，專案是使用vue-cli腳手架搭建。

專案搭建的步驟和專案目錄專門寫了一篇文章：點選這裡進行傳送

後續VueRouter系列的文章的示例編寫均基於該專案環境。

 VueRouter系列文章連結

　　《VueRouter爬坑第一篇》-簡單實踐

　　《VueRouter爬坑第二篇》-動態路由

　　《VueRouter爬坑第三篇》-巢狀路由

 閱讀目錄

一.安裝VueRouter

　　1.npm 安裝VueRouter

　　2.如何使用VueRouter

二.元件和路由之間的對映

　　1.<router-link>編寫可以跳轉的url

　　2.編寫跳轉的目的元件

　　3.定義路由

　　4.入口檔案main.js配置路由

　　5.配置元件渲染的位置

三.總結

一.安裝VueRouter

1.npm 安裝VueRouter

　　安裝命令：npm install vue-router

2.如何使用VueRouter

　　安裝完成之後，需要有兩個步驟才能使用

　　第一步：引入vue-router

　　第二步：將元件註冊到全域性（全域性註冊後，在別的元件中可以直接使用，無需單獨引入）

 　　這塊先貼出步驟，暫時不寫程式碼，後面做元件和路由對映的時候在把程式碼寫上。

二.元件和路由之間的對映

　　接著我們的疑問就來了：頁面中的一個URL如何匹配到我們編寫的元件？下面我們就一步一步揭開這個疑惑。

1.<router-link>編寫可以跳轉的url

　  關於router-link的官方文件說明可點選此處檢視

　　關於上面的疑問，我們第一步需要先編寫一個可以跳轉的URL。我們先把專案中預設生成的HelloWorld.vue元件中div.hello中的內容刪除，然後在加上我們自己的內容。

E:\MyStudy\test\VueDemo\src\components\HelloWorld.vue

<template>
  <div class="hello">
    <p>這裡是HelloWorld元件</p>
    <!-- 使用<router-link>編寫可跳轉的URL -->
    <router-link to="/index">點選這裡去另外一個元件</router-link>
  </div>
</template>
// 後面的script和style沒有修改，因此省略

web頁面效果

<template> <div class="hello"> <p>這裡是HelloWorld元件</p> <!-- 可跳轉的URL --> <router-link to="/index">點選這裡去另外一個元件</router-link> </div> </template> // 後面的script和style沒有修改，因此省

2.編寫跳轉的目的元件

　　因為我們要實現url跳轉，因此需要編寫一個跳轉的目的元件。在這裡我們建立一個元件Index。

E:\MyStudy\test\VueDemo\src\components\Index.vue

<template>
    <div>  
        <h1>這裡是Index.vue元件</h1>
    </div>
</template>
<script>
export default {
    name: 'Index'
}
</script>

3.定義路由

　　現在可點選的URL準備好了，跳轉的目標元件也準備好了。接下來就是定義路由配置：將URL對映到元件。

　　一般專案中為了後續好維護，會將路由配置單獨寫在一個檔案中。因此我們先在E:\MyStudy\test\VueDemo\src 目錄下建立一個rotuer目錄，在該目錄下建立一個router.js檔案，後面所有的路由配置均在該檔案中編寫。

　　建立路由配置檔案

E:\MyStudy\test\VueDemo\src\router\router.js

// vue-router使用第一步：引入vue-router
import Vue from "vue"
import Router from "vue-router"

// vue-router使用第二步：元件註冊到全域性
Vue.use(Router)

// 第三步：定義路由配置
// 引入路由需要對映的元件
import Index from '@/components/Index.vue'
const routes = [
    {
        path: '/index',   // 匹配的URL
        component: Index  //對映的目標元件
    }
]

// 第四步：建立vue-router例項，傳遞前面定義的路由配置
const router = new Router({
    routes: routes
})

// 第五步：將vue-router例項使用export匯出（供其他模組使用）
export default router 

　　步驟一和步驟二在前面我們已經將過，步驟四和步驟五基本都是固定的配置不可缺少。

　　第三個步驟中的routes就是稱為路由配置，可以看到routes是一個數組，它可以包含多個字典物件。每一個字典物件就是一條單個的路由。我們寫的這個路由只有最簡單的兩個配置項：path和component，註釋中有說明這兩個配置項的含義。

4.入口檔案main.js配置路由

　　前面的三個部分完成後，還需要在入口檔案處把這個路由例項注入到跟元件中，這樣整個應用都可以擁有路由功能。

E:\MyStudy\test\VueDemo\src\main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
  //將路由例項註冊到根元件中
  router: router
})

大功告成，我們現在點選介面的連結試一下

 　　在這裡呢，賣了個關子少了一個步驟：沒有告訴vue-router把匹配到的元件渲染到哪裡。

5.配置元件渲染的位置

<!-- 使用下面的這個標籤可以告訴vue-router將匹配到的元件渲染到這個位置 -->
<router-view>  </router-view>

然後我們將該段程式碼加入到HelloWorld.vue這個元件中。

E:\MyStudy\test\VueDemo\src\components\HelloWorld.vue

<template>
  <div class="hello">
    <p>這裡是HelloWorld元件</p>
    <!-- 可跳轉的URL -->
    <router-link to="/index">點選這裡去另外一個元件</router-link>
    
    <!-- 使用下面的這個標籤可以告訴vue-router將匹配到的元件渲染到這個位置 -->
    <router-view></router-view>
  </div>
</template>
// 後面的script和style沒有修改，因此省略

現在我們重新試一下效果

現在可以看到點選連結後介面發生了變化：

index.vue中的內容顯示到了HelloWorld.vue中router-view配置的位置

url由localhost:8080/#/變為localhost:8080/#/index

三.總結

　　至此，一個簡單的url路由到元件的例項就完成了，現在總結一下前面梳理過的內容

　　1.需要使用npm安裝vue-router。

注意：在使用veue init 初始化專案的時候會提示是否安裝vue-router，如果選擇是，那後續就不需要再次手動安裝了。

　　2.可以使用<router-link/>編寫可跳轉的url，並使用<router-view/>指定元件的渲染位置

　　3.建立Vue-Router例項，傳入配置的路由：最簡單的路由配置就是path和component

&n