VueRouter系列的文章示例編寫時，項目是使用vue-cli腳手架搭建。
項目搭建的步驟和項目目錄專門寫了一篇文章：點擊這里進行傳送
后續VueRouter系列的文章的示例編寫均基於該項目環境。
VueRouter系列文章鏈接
本篇文章完整代碼請移步：
https://github.com/JEmbrace/VueRouter/tree/Simplepractice
閱讀目錄
一.前言
二.安裝VueRouter
1.npm 安裝VueRouter
2.如何使用VueRouter
三.組件和路由之間的映射
1.<router-link>編寫可以跳轉的url
2.編寫跳轉的目的組件
3.定義路由
4.入口文件main.js配置路由
5.配置組件渲染的位置
四.總結
一.前言
關於項目的搭建我們在文章最前面已經給了鏈接，在項目搭建這篇文章的最底部有一個注意事項，為了能清楚的理解本篇文章，我再把注意事項貼在這里：
我們的項目在使用vue-cli初始化的時候是沒有安裝vue-router的，所以如果你的在初始化的時候安裝了vue-router，那這篇文章的有些部分可能不太適用了。
請大家謹慎食用。
二.安裝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> <!-- 可跳轉的URL --> <router-link to="/index">點擊這里渲染出另外一個組件</router-link> </div> </template>
// 后面的script和style沒有修改，因此省略
App組件不做修改，這里就不貼代碼了，接着我們使用npm run dev啟動項目查看一下瀏覽器效果。
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/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
