大家好，今天的内容，我将和大家一起聊聊 Vue 路由相關的知識，如果你以前做過服務端相關的開發，那你一定會對程式的URL結構有所了解，我沒記錯的話也是路由映射的概念，需要進行配置。
其實前端這些架構的路由概念也是借鑒了後端路由架構的思想，讓我們能像後端一樣，進行路由規則化的配置。Vue的路由插件不僅是官方提供還有完善的文檔，還有一個優勢就是随着Vue版本同步更新。
安裝路由插件( Vue Router)
你可以通過npm(npm install vue-router)或通過 Vue CLI 腳手架建立項目的時候進行選擇安裝。本節的示例，我們将在上節的例子基礎上，通過 npm 的方式安裝路由，我們将從基礎的安裝、配置講起，然後在逐漸的深入學習。
首先，我們通過控制台，将目錄切換到目前項目的根目錄，我們輸入以下指令進行手動安裝：
npm install vue-router
接下來，完成安裝後，我們需要對其進行配置，将路由映射到對應的元件上，我們在 src 檔案夾中建立一個 router.js 的檔案，然後添加以下内容：
src/router.js
我們首先導入 Vue 本身和 Vue路由，因為路由是插件，必須在Vue對象中進行注冊，這裡我們使用 vue.use() 進行注冊。
接下來，我們建立了一個Router執行個體，并進行了相關初始化的配置。這裡你至少需要配置一個路由規則，你可以看到這裡是對象數組的形式進行定義的，路徑對應着對應的元件，我們稍後會對這些參數進行詳細的講解。
接下來你可能會猜到，我需要完成一個 Home 元件的建立。
注意：如果你通過腳手架的形式安裝 Vue Router 時，它會為你在目前的項目中自動建立一個 views 的檔案夾，我們應該提前規劃好，這些所謂的頁面元件，将其放在這裡，差別于其它的公共元件，我們應該遵守這項規則。
src/views/Home.vue
然後，我們别忘記了修改 App 這個元件的代碼内容，代碼如下所示：
從上述代碼我們可以看出，我們使用了 替換了相關元件的标簽，這是 Vue Router 插件提供的元件之一，這裡用來顯示目前出于活動狀态的路由元件。
注意： 這裡我們引入了一個 CSS 架構，别忘了進行手動安裝，你可以通過以下指令進行安裝：npm i semantic-ui-css
最後我們要做的是将路由配置導入到應用程式的入口，然後将其傳入Vue執行個體對象裡，進行初始化，如下代碼所示：
從上述代碼中，我們可以看出，我們将導入的 router.js 建立的執行個體作為參數傳遞給Vue執行個體，然後作為插件注冊到我們的Vue執行個體中，這樣使得路由功能在整個項目中得以使用。
到此為止，我們就完成了第一個關于路由元件的例子，我們可以輸入 npm run serve 看看是否能正常運作，如果不出意外的話，你能看到如下的效果，還蠻不錯哦：
Vue-router 配置
路由初始化時，我們可以進行一些參數配置，如下所示：
base：頁面基礎路徑
這個參數配置允許你所有的URL路徑都是基于這個路徑之下，比如你希望Vue項目站點，都位于 www.example.com/my-app/ 這個路徑下面，你可以将 base 參數設定 my-app 即可，如下代碼所示：
你可能看到了我們在上個例子中加了個mode參數，接下來我們來聊聊mode參數是做啥的。
mode：hash / history
配置路由 history 模式
此模式可以将你的項目路由配置成#的模式，例如 www.example.com/#/blog 這個形式，這樣做主要是為了相容舊版本浏覽器，主要其不相容HTML5 history 的模式，我們都清楚# 更多是用來做錨點定位的，同時它不會被搜尋引擎解析，導緻網站 SEO 效果不好。
服務端配置： 如果你将項目部署到服務端，你需要了解一些基礎的服務端配置，你可以參考這個連結： https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations
更多的 Vue-router 參數： 如果你想了解更多的參數配置，你可以檢視官方文檔進行詳細了解：
https://router.vuejs.org/api/#router-construction-options
建立 Routes
我們在文章的開頭學習了，如何建立自定義的 routes 對象執行個體及相關的配置内容。
比如我們可以為每個需要定義路由的元件定義路徑規則，如下段代碼所示：
當使用者輸入/hello-world，将會顯示 HelloWorld 元件。除了這些參數，還有如下常見參數，你需要了解下：
name: 這個屬性是可選項，如果你的程式比較簡單，就沒必要使用，但是大多數我還是建議你配置上，比如你可以在如下場景進行使用：
1、通過name屬性，為一個頁面中不同的router-view渲染不同的元件,如下代碼所示：
2、使用$router.name擷取元件name值
3、頁面渲染時傳遞參數，這個稍後會詳細介紹到
redirect： 頁面重定向，将目前路徑導向另外一個路徑，如下代碼所示：
beforeEnter： 我們可以定義進入這個路由之前執行的函數。關于這個詳細的用法，我會在路由守衛裡進行詳細介紹。
meta：我們可以通過這個參數自定義些内容，比如我們做導航的面包屑路徑問題，将會用到這個配置，如下圖所示：
如果你想了解更多關于routes對象的參數内容，你可以通路這篇官方文檔進行詳細了解 https://router.vuejs.org/api/#routes
路由傳參(Route Parameters)
通常我們的路由是動态的，通過會有類似帶ID這樣的URL傳值，我們可以使用冒号的形式進行定義，如下段代碼所示：
上述代碼我們指定了路由的名稱name,并指定 /blog/slug 這種路徑的傳參形式，接下來我們來看看如何在路由裡接收擷取這個參數，比如下段代碼，我們接收這個參數進行AJAX的接口請求，如下所示：
最好将this.$route的使用限制在頁面元件裡，并通過props的方式接收參數傳遞給需要的子元件，這樣可以避免UI元件耦合到路由裡，進而更友善重用。
小節
今天的内容就和大家分享到這裡，今天我們一起學習了什麼是Vue Router，并親自動手建立了一個簡單的路由項目，接着我們又進一步學習了Vue-router 配置及 Routes的相關配置，最後我們又學習了如何路由傳參。由于篇幅原因，關于路由的 Navigation 導航與路由守衛的内容将會在下面的文章進行詳細介紹，并會帶着大家親自動手做一個路由守衛的例子，敬請期待哦。
後續文章更精彩，如果你覺得内容對你有幫助，歡迎給個贊哦，最後别忘記關注我哦，你的關注将是我持續輸出的動力，感謝大家閱讀。
vue基礎相關文章
「vue基礎」新手快速入門篇(一)
「vue基礎」Vue相關建構工具和基礎插件簡介
「vue基礎」手把手教你編寫一個簡單的 Vue 元件
「vue基礎」深入學習如何編寫 Vue 元件