一.什麼是vue-router
vue-router路由插件，這裏的路由並不是指我們平時所說的硬件路由器，這裏的路由就是SPA（單頁應用）的路徑管理器。再通俗的說，vue-router就是我們WebApp的鏈接路徑管理系統。
二.vue-router安裝
安裝vue-router
vue-router是一個插件包，所以我們還是需要用npm或cnpm來進行安裝的。打開命令行工具，進入你的項目目錄，輸入下面命令。
npm install vue-router --save-dev
解讀router/index.js文件
我們用vue-cli生產了我們的項目結構，你可以在src/router/index.js文件，這個文件就是路由的核心文件，我們先解讀一下它。
import Vue from 'vue' //引入Vue
import Router from 'vue-router' //引入vue-router
import Hello from '@/components/Hello' //引入根目錄下的Hello.vue組件
Vue.use(Router) //Vue全局使用Router
export default new Router({
routes: [ //配置路由，這裏是個數組
{ //每一個鏈接都是一個對象
path: '/', //鏈接路徑
name: 'Hello', //路由名稱，
component: Hello //對應的組件模板
}
]
})
上邊的代碼中已經對每行都進行了註釋，其實在這個路由文件裏只配置了一個功能，就是在進入項目時，顯示Hello.vue裏邊的內容代碼。
三.vue-router路由配置（一級路由）
1.新建details.vue/sort.vue/mine.vue文件，具體寫法如下
2.App.vue文件
3.index.js文件（路由配置文件）
效果如圖：
四.vue-router路由配置（二級路由）
1.新建login.vue/register.vue兩個文件
2.在首頁的組件下編寫router-link路徑
3.配置路由，二級路由用children屬性實現，注意：二級路由路徑不用寫"/","/"表示找子路徑，這裏直接寫組件名稱即可。
五.單頁面多路由區域操作
“單頁面多路由區域操作”，實際需求是這樣的，在一個頁面裏我們有2個以上<router-view>區域，我們通過配置路由的js文件，來操作這些區域的內容。也就是不同的router-view對應不同的組件。便於樣式設置。如圖：我想在Helloworld文件下，讓<router-view name="left"></router-view>對應登錄組件，讓<router-view name="right"></router-view>對應註冊組件。
在index.js文件下配置路由文件
