vue實例講解之vue-router的使用

實例講解系列之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庫

項目源代碼下載地址：