淺入深出Vue：路由

若羽。發表於2019-07-08
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演示，因為路由這部分想要更好的結合實踐來學習的話，最好利用實戰來學習。

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

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

相關文章