淺入深出Vue：路由

路由的概念在計算機界中的歷史大概能夠追溯到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數組中有一個路由對象，這個路由對象定義了以下的路由：

1. url 對應根，即服務器web地址。

2. 此路由的名稱是 HelloWorld，路由的名稱能夠用以路由間的跳轉，但必須保證惟一。

3. 此路由對應的組件是 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演示，由於路由這部分想要更好的結合實踐來學習的話，最好利用實戰來學習。

所以這裏只講述了路由的概念和基本用法，以及使用中常見的幾個問題。

咱們在入門篇會常用到它的，會有更多的機會去深刻的瞭解它，深刻篇也會對它進行一個更深刻的瞭解：如何自動化生成路由。