一.安裝vue-router

vue-router是一個插件包，所以我們還是需要用npm來進行安裝的。打開命令行工具，進入你的項目目錄，輸入下面命令。

npm install vue-router --save

二.解讀router/index.js文件

我們用vue-cli生產了我們的項目結構，你可以在src/router/index.js文件，這個文件就是路由的核心文件

importRouterfrom'vue-router'//引入vue-router

importHellofrom'@/components/Hello'//引入根目錄下的Hello.vue組件

Vue.use(Router)//Vue全局使用Router

exportdefaultnewRouter({

routes:[//配置路由，這里是個數組

{//每一個鏈接都是一個對象

path:'/',//鏈接路徑

name:'Hello',//路由名稱，

component:Hello//對應的組件模板

}

]

})

三.簡易導航制作

1》改造App.vue的導航代碼

2》改寫components/Hi.vue頁面

3》在components目錄下新建兩個組件模板 Hi1.vue 和 Hi2.vue

4》修改router/index.js代碼

四.vue-router如何參數傳遞

方法1,使用name傳參（實際開發并不常用）

（1）在路由配置文件中寫name

（2）App.vue ?中接收參數{{ $route.name }}}

方法2，修改html模板中的router-link標簽

注意事項：

（1）name的值要和路由配置中的name保持一致

（2）參數params的值可以傳多個，是對象的形式存在的 ?key：value

操作方法：

1.router文件中index.js

2.App.vue文件（注意，如果為動態傳參，提前必須加v-bind：或者其縮寫：）

3.組件文件中的hi1.vue文件

最終顯示效果為

方法3.vue-router 利用url傳遞參數---- ? ? ? :冒號的形式傳遞參數

在配置文件里以冒號的形式設置參數。我們在/src/router/index.js文件里配置路由。

我們需要傳遞參數是新聞ID（newsId）和新聞標題（newsTitle）.所以我們在路由配置文件里制定了這兩個值。

在src/components目錄下建立我們params.vue組件，也可以說是頁面。我們在頁面里輸出了url傳遞的的新聞ID和新聞標題。

在App.vue文件里加入我們的標簽。這時候我們可以直接利用url傳值了。

擴展：url里面的正則

加入正則需要在路由配置文件里（/src/router/index.js）以圓括號的形式加入。

path:'/params/:newsId(\\d+)/:newsTitle',

加入了正則，我們再傳遞數字之外的其他參數，params.vue組件就沒有辦法接收到。

五.單頁面多路由區域操作

實際需求是這樣的，在一個頁面里我們有2個以上區域，我們通過配置路由的js文件，來操作這些區域的內容。例如我們在src/App.vue里加上兩個標簽。我們用vue-cli建立了新的項目，并打開了src目錄下的App.vue文件，在下面新寫了兩行標簽,并加入了些CSS樣式。

現在的頁面中有了三個標簽，也就是說我們需要在路由里配置這三個區域，配置主要是在components字段里進行。

六.vue-router 的重定向-redirect

redirect基本重定向

路由文件index.js配置路由

App.vue文件

重定向時傳遞參數

路由文件index.js配置路由(redirect直接寫要跳轉的路徑)

App.vue文件

七.alias別名的使用

1.首先我們在路由配置文件里（/src/router/index.js），給Home路徑起一個別名，huaqian。

2.配置我們的，起過別名之后，可以直接使用標簽里的to屬性，進行重新定向。

redirect和alias的區別

redirect：仔細觀察URL，redirect是直接改變了url的值，把url變成了真實的path路徑。

alias：URL路徑沒有別改變，這種情況更友好，讓用戶知道自己訪問的路徑，只是改變了中的內容。

填坑：

別名請不要用在path為’/’中，如下代碼的別名是不起作用的。

{

? ? ?path:'/',

? ? component:Hello,

? ? ?alias:'/home'

}

八.路由的過渡動畫

<transition>標簽

想讓路由有過渡動畫，需要在標簽的外部添加標簽，標簽還需要一個name屬性。

我們在/src/App.vue文件里添加了標簽，并給標簽起了一個名字叫fade。

其中過渡模式mode里面的值out-in指的是先退出后進入。默認是in-out

in-out:新元素先進入過渡，完成之后當前元素過渡離開。

out-in:當前元素先進行過渡離開，離開完成后新元素過渡進入。

css過渡類名：

組件過渡過程中，會有四個CSS類名進行切換，這四個類名與transition的name屬性有關，比如name=”fade”,會有如下四個CSS類名：

fade-enter:進入過渡的開始狀態，元素被插入時生效，只應用一幀后立刻刪除。

fade-enter-active:進入過渡的結束狀態，元素被插入時就生效，在過渡過程完成后移除。

fade-leave:離開過渡的開始狀態，元素被刪除時觸發，只應用一幀后立刻刪除。

fade-leave-active:離開過渡的結束狀態，元素被刪除時生效，離開過渡完成后被刪除。

從上面四個類名可以看出，fade-enter-active和fade-leave-active在整個進入或離開過程中都有效，所以CSS的transition屬性在這兩個類下進行設置。

那我們就在App.vue頁面里加入四種CSS樣式效果，并利用CSS3的transition屬性控制動畫的具體效果。代碼如下：

九.mode的設置和404頁面的處理

mode的兩個值

histroy:當你使用 history 模式時，URL 就像正常的 url，例如 http://jsapng.com/lms/，也好看！

hash:默認’hash’值，但是hash看起來就像無意義的字符排列，不太好看也不符合我們一般的網址瀏覽習慣。

404頁面的設置：

用戶會經常輸錯頁面，當用戶輸錯頁面時，我們希望給他一個友好的提示，為此美工都會設計一個漂亮的頁面，這個頁面就是我們常說的404頁面。vue-router也為我們提供了這樣的機制.

1.設置我們的路由配置文件（/src/router/index.js）：

2.新建404頁面：

在/src/components/文件夾下新建一個Error.vue的文件。簡單輸入一些有關錯誤頁面的內容。

3.我們在用瞎寫一個標簽的路徑。<route-link></route-link>

十.路由中的鉤子

路由配置文件中的鉤子函數

我們可以直接在路由配置文件（/src/router/index.js）中寫鉤子函數。但是在路由文件中我們只能寫一個beforeEnter,就是在進入此路由配置時。先來看一段具體的代碼：

我們在params路由里配置了bdforeEnter得鉤子函數，函數我們采用了ES6的箭頭函數，需要傳遞三個參數。我們并在箭頭函數中打印了to和from函數。具體打印內容可以在控制臺查看object。

三個參數：

to:路由將要跳轉的路徑信息，信息是包含在對像里邊的。

from:路徑跳轉前的路徑信息，也是一個對象的形式。

next:路由的控制參數，常用的有next(true)和next(false)。

寫在模板中的鉤子函數

在配置文件中的鉤子函數，只有一個鉤子-beforeEnter，如果我們寫在模板中就可以有兩個鉤子函數可以使用：

beforeRouteEnter：在路由進入前的鉤子函數。

beforeRouteLeave：在路由離開前的鉤子函數。

這是我們寫在params.vue模板里的路由鉤子函數。它可以監控到路由的進入和路由的離開，也可以輕易的讀出to和from的值。

十一.編程式導航

this.$router.go(-1) 和 this.$router.go(1)

這兩個編程式導航的意思是后退和前進，功能跟我們瀏覽器上的后退和前進按鈕一樣，這在業務邏輯中經常用到。比如條件不滿足時，我們需要后退。

router.go(-1)代表著后退，我們可以讓我們的導航進行后退，并且我們的地址欄也是有所變化的。

1.我們先在app.vue文件里加入一個按鈕，按鈕并綁定一個goback( )方法。

2.在我們的script模塊中寫入goback()方法，并使用this.$router.go(-1),進行后退操作。

this.$router.push(‘/xxx ‘)

這個編程式導航都作用就是跳轉，比如我們判斷用戶名和密碼正確時，需要跳轉到用戶中心頁面或者首頁，都用到這個編程的方法來操作路由。

我們設置一個按鈕，點擊按鈕后回到站點首頁。如上圖