實例講解系列之vue-router的使用
先總結一下vue-router使用的基本框架：
1.安裝並且引入vue-router
安裝：npm install vue-router --save-dev
2.執行Vuerouter:
3.寫好路由配置：
4.new 一個vueRouter實例，並且將路由配置文件，傳到vueRouter實例上去。
5.在入口文件里面引入vueRouter實例並且掛載到vue實例上
下面進行實例講解：
先來看項目最終的效果：
做這個實例的步驟：
來看一下項目的目錄結構
1.在App.vue文件里面添加router-link和router-view
active－class是指定當前路由位置的
transition是用來做路由切換動畫的。
2.規划組件，在src目錄下建立一個componets目錄，里面建立一個home.vue組件來存放首頁的代碼。news.vue來存放news列表代碼。
home：
news：
2.設置路由配置文件，src目錄下建立一個router文件夾新建一個index.js,routerConfig.js
routerConfig.js:
index.js
mode和scrollBehavior的作用請看代碼注釋。
3.在入口文件掛載vuerRuter
執行npm run dev就可以查看效果了。
在這個項目中使用了animate.css動畫庫做路由切換動畫。
需要在我們在main.js中引入這個css庫
項目源代碼下載地址：