路由的概念在計算機界中的歷史大概可以追溯到OSI模型中的數據鏈路層與網絡層中的定義。這里的定義大意是：在轉發數據包時，根據數據包的目的地址進行尋址，從而將數據包發往指定的目的地。
在 Web開發中同樣存在着路由的概念，在各式各樣的前端 mvvm框架出來之前，普遍存在於后端。通俗的說法也就是 [module/]controller/action的組合，將 url映射到指定的 action中處理。現在在前端中同樣存在着路由這一概念。
為什么需要路由
在以往的前端開發中，通常沒有路由這一概念，這樣就造成一個問題：
- 前端是離散的，不可獨立的（靜態頁面除外，它不需要上下文）。
脫離了后端的前端無法較好的構建一個完整系統，當然也有一些比較優秀的方案：
- 單頁應用，采用 ajax控制 dom節點以及動態修改頁面內容
等等。
但不可否認的是，在沒有路由這一概念的情況下，前端確實顯得不夠靈活，跳轉頁面時隨處可見的路徑硬編碼。url 即物理路徑。
為了完善前端開發，在后來的框架中，均引入了路由、控制器、視圖等后端概念。借鑒成熟的東西來完善自身，這是非常便捷的一種方式。
因此在現在的前端開發中，路由也是必不可少的一環了。很多人被它的概念弄的暈頭轉向，讓我們捋一捋，看看它的真面目。
路由是什么
前端中的路由更好理解。以 vue舉例，vue-router會解析 url，將其映射到指定的 component進行渲染。因此，在這里我們給 vue中的路由一個通俗的、狹義的定義：
- 一個 url，對應着一個具體的組件實例。
路由是對 url進行解析，看這個 url是否存在有與之匹配的組件去渲染。
路由如何使用
在vue中分為三步：
1. 安裝vue-router組件。
可以查看 package.json，看是否安裝了 vue-router。沒有的話安裝一下即可。
在 vue-cli 3.x中，可以直接在左側面板中的依賴里查看到，並且一鍵安裝。
2. 使用vue-router
在 main.js中全局引入一下：
import Router from 'vue-router'
Vue.use(Router)
3. 定義路由
在這一步，我們要定義路由。
即我們想讓哪些 url解析到哪些組件上去，來看看官方的例子：
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
例子中的 routes數組中有一個路由對象，這個路由對象定義了如下的路由：
-
url 對應根，即服務器web地址。
-
此路由的名稱是
HelloWorld，路由的名稱可以用以路由間的跳轉，但必須保證唯一。 -
此路由對應的組件是
HelloWorld組件，這個組件在第三行代碼中引入了。
以上三點也是定義一個路由對象的基本要素，第二點非必須。
定義子路由
現在我們有 localhost/的路由了，如果再加一個 localhost/login的路由呢？
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld,
children: [
{
path: 'login',
name: 'Login',
component: Login
}
]
}
]
})
只需要在對應的路由對象下添加 children數組即可，數組內的對象的 path只需填相對路由即可。這里的例子可是不能運行成功噢，哪怕實現了 Login組件也不能看到預期的效果。
還有一點最重要的需要注意：
- 在子路由/嵌套路由的情況下，想要層層渲染到子路由/嵌套路由，必須在其上層路由對象的模板中，添加
<router-view>組件，讓vue-router能繼續往下渲染。
代碼：
<router-view :key="$route.fullPath"></router-view>
很多童鞋就是被卡在這里了，還有另一種寫法：
<router-view></router-view>
多級路由也是這么層層定義出來的。
路由間的跳轉
在引入 vue-router之后，在組件中可以使用如下語句獲取 vue-router實例：
this.$router
// 通過路由跳轉,下面的代碼會跳轉到 localhost/login
this.$router.push('/login')
// 通過命名跳轉, 下面的代碼同樣會跳轉到 localhost/login
this.$router.push({ name : 'Login' })
// 路由帶參數跳轉
this.$router.push({
path: '/login',
query: {
username: 'xxx',
}
})
// 命名路由帶參數跳轉
this.$router.push({
name: 'Login',
params: {
username: 'xxx',
}
})
上述在帶參數跳轉的例子中，需要着重注意的一點：
- 當使用
path跳轉時，參數只能使用query，不能使用params
也就是說，下面的代碼是不能正常傳遞參數的：
this.$router.push({
path: '/login',
params: {
username: 'xxxx',
}
})
在視圖中可以使用如下代碼進行跳轉：
<router-link :to="{ path: '/login'}">login</router-link>
重點：
- 不管是
this.$router.push的參數，還是router-link的to參數，它們都可以是一個路由對象
記住這一點，就可以隨心所欲的玩轉跳轉了。
寫在最后
路由這篇沒有demo演示，因為路由這部分想要更好的結合實踐來學習的話，最好利用實戰來學習。
因此這里只講述了路由的概念和基本用法，以及使用中常見的幾個問題。
我們在入門篇會經常使用到它的，會有更多的機會去深入的了解它，深入篇也會對它進行一個更深入的了解：如何自動化生成路由。