vue 快速入門 系列 —— vue-router

彭加李發表於2021-10-09

其他章節請看:

vue 快速入門 系列

Vue Router

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度整合,讓構建單頁面應用變得易如反掌。

什麼是路由

路由就是根據不同的 url(網址) 返回不同的頁面(資料)。如果這個工作在後端做(或者說由後端程式設計師做),就是後端路由;在前端做就是前端路由。

絕大多數的網站是後端路由。流程就像這樣:

  1. 瀏覽器輸入 url,回車
  2. 後端伺服器接收到請求
  3. 將請求(url)交給對應的處理邏輯 —— 有一個專門的正則配置列表來分發
  4. 各種操作完成後,最後將頁面(資料)返回給瀏覽器

平時總說的 SPA(單頁面應用)就是前後端分離的基礎上,再加一層前端路由。

Vue Router 的核心

無論是後端路由還是前端路由,解決的核心問題應該都是一樣的。

後端路由常見的 2 種場景:

  • 瀏覽器輸入 url,後端返回相應的頁面
  • 在網頁中點選 a 標籤,跳轉到 a 標籤指向的頁面

Vue Router 與後端路由對應的場景:

  • 根據 url 返回相應的元件
    • 核心1:提供一個 map 的資料結構解決此事
  • 在網頁中點選標籤,跳轉到相應的頁面
    • 核心2:提供內建標籤 <router-link>,預設是a標籤
  • 由於是做單頁面應用,也就是隻有一個頁面,切換頁面也就是切換元件,那麼元件在哪裡顯示,這是前端路由需要解決的
    • 核心3:提供<router-view>來解決此事

環境準備

通過 vue-cli 建立專案

// 專案預設 `[Vue 2] less`, `babel`, `router`, `vuex`, `eslint`
$ vue create test-vue-router

啟動服務:

$ test-vue-router> npm run serve

頁面如果成功顯示,說明環境準備完成,下面的例子都是基於這個專案進行。

Tip:儲存程式碼如果遇到 eslint 的干擾(例如下面資訊),可以通過配置 lintOnSave 生產構建時禁用 eslint-loader

test-vue-router\src\views\About.vue
   7:1   error  More than 1 blank line not allowed         no-multiple-empty-lines
  12:10  error  Missing space before function parentheses  space-before-function-paren
  16:14  error  Missing space before function parentheses  space-before-function-paren
  18:38  error  Extra semicolon                            semi
  20:7   error  Block must not be padded by blank lines    padded-blocks

✖ 5 problems (5 errors, 0 warnings)
  5 errors and 0 warnings potentially fixable with the `--fix` option.
// vue.config.js
module.exports = {
  lintOnSave: process.env.NODE_ENV !== 'production'
}

demo1 - 起步 - 歡迎來到首頁

需求:訪問 http://localhost:8080/,頁面顯示 歡迎來到首頁

步驟如下:

首先我們檢視 router 的核心檔案:

// src/router/index.js
// vue-cli自動生成。無需修改
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)
// 核心1 - map
const routes = [
  {
    path: '/',             // {1}
    name: 'Home',
    component: Home       // {2}
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]
// 例項化路由器
const router = new VueRouter({
  routes
})

export default router

接著修改 App.vue 和 Home.vue 即可:

// src/views/Home.vue
<template>
    <p>歡迎來到首頁</p>
</template>
// src/App.vue
<template>
  <div id="app">
    <!-- 核心3 - <router-view> 渲染路徑匹配到的檢視元件-->
    <router-view/>                      
  </div>
</template>

流程是:

  1. 瀏覽器輸入 http://localhost:8080/
  2. 在 map 中匹配(行{1})
  3. 將 map 中匹配到的元件(行{2})渲染到 <router-view/>

demo2 - 註冊

需求:在首頁中增加一個註冊按鈕,點選註冊,跳轉到註冊頁。在註冊頁點選註冊,在回到首頁。(建議在demo1基礎上做)

以下是核心程式碼:

// views/Home.vue
<template>
  <div>
    <p>
      <!-- 核心2 - to 表示目標路由的連結 -->
      <router-link to="/register">註冊</router-link>
    </p>
    <p>歡迎來到首頁</p>
  </div>
</template>
// router/index.js
// 新增
import Register from '../views/Register'

const routes = [                    
  {
    path: '/',
    component: Home                  
  },
  // 新增
  {
    path: '/register',
    component: Register          
  }
]
// views/Register.vue
<template>
  <section>
    <p>使用者名稱:<input type="text" /></p>
    <p>密碼:<input type="password" /></p>
    <p><router-link to="/">註冊</router-link></p>
  </section>
</template>

動態路由匹配

$route.params

我們經常需要把某種模式匹配到的所有路由,全都對映到同一個元件。可以這樣:

// router/index
routes: [
    // 動態路徑引數 以冒號開頭
    { path: '/user/:id', component: User }
  ]

/user/foo/user/bar 都將對映到相同的路由

一個“路徑引數”使用冒號 : 標記。當匹配到一個路由時,引數值會被設定到 this.$route.params,可以在每個元件內使用。

需求:建立一個顯示文章的元件,根據不同的 id 顯示對應的文章,url 是 /article/:id

// router/index.js
// 新增
import Article from '../views/Article'

const routes = [                    
  // 新增
  {
    path: '/article/:id',
    component: Article          
  }
]
// views/Article.vue
<template>
    <div>
        <p>文章列表頁</p>
        <p>這是對應 <em>{{ $route.params.id }}</em> 的文章</p>
    </div>
</template>

測試:

瀏覽器輸入:http://localhost:8080/article/2

頁面輸出:
文章列表頁

這是對應 2 的文章

Tip$route(路由物件) 物件還提供了其它有用的資訊:

  • $route.path,字串,對應當前路由的路徑,總是解析為絕對路徑,如 "/foo/bar"
  • $route.query,一個 key/value 物件,表示 URL 查詢引數。例如,對於路徑 /foo?user=1,則有 $route.query.user == 1,如果沒有查詢引數,則是個空物件。
  • $route.hash,當前路由的 hash 值 (帶 #) ,如果沒有 hash 值,則為空字串
  • $route.fullPath,完成解析後的 URL,包含查詢引數和 hash 的完整路徑。
  • $route.matched
  • $route.name,當前路由的名稱,如果有的話
  • $route.redirectedFrom,如果存在重定向,即為重定向來源的路由的名字

匹配優先順序

有時候,同一個路徑可以匹配多個路由,此時,匹配的優先順序就按照路由的定義順序:路由定義得越早,優先順序就越高。

巢狀路由

巢狀路由也或叫子路由。即一個元件內可以有自己的<router-view>

常見的的一個場景是,有一個元件 Article,裡面有個坑位,這個坑位有時(根據url的變化)需要顯示 ArticleComponentA 元件,有時顯示 ArticleComponentB 元件。

index.js:

// 新增
import ArticleComponentA from '../views/ArticleComponentA'
import ArticleComponentB from '../views/ArticleComponentB'

const routes = [                    
  // 新增
  {
    path: '/article/:id',
    component: Article,
    children: [
      {
        // 當 /user/:id/ca 匹配成功,
        // ArticleComponentA 會被渲染在 User 的 <router-view> 中
        path: 'ca',
        component: ArticleComponentA
      },
      {
        // 當 /user/:id/cb 匹配成功
        path: 'cb',
        component: ArticleComponentB
      }
    ]       
  }
]
// views/ArticleComponentA.vue
<template>
  <div style="border: 1px solid">
    <p>我是A</p>
    <p>
      這是對應 <em>{{ $route.params.id }}</em> 的文章
    </p>
  </div>
</template>
// views/ArticleComponentA.vue
<template>
  <div style="border: 1px solid">
    <p>我是B</p>
    <p>
      這是對應 <em>{{ $route.params.id }}</em> 的文章
    </p>
  </div>
</template>
// views/Article.vue
<template>
  <div>
    <p>文章列表頁</p>
    <!-- 子路由 -->
    <router-view></router-view>
  </div>
</template>

測試:

瀏覽器輸入:http://localhost:8080/article/1/cb

頁面顯示:
文章列表頁

我是B

這是對應 1 的文章

程式設計式的導航

除了使用 <router-link> 建立 a 標籤來定義導航連結,我們還可以藉助 router 的例項方法,通過編寫程式碼來實現。

需求:編寫支付元件,顯示支付成功,三秒後自動跳轉到首頁

index.js:

// 新增
import Pay from '../views/Pay'

const routes = [                    
  // 新增
  {
    path: '/pay',
    component: Pay          
  },
]

Pay.vue:

<template>
    <div>
        <p>支付成功,三秒後自動跳轉到首頁</p>
    </div>
</template>

<script>
export default {
    created: function(){
        setTimeout(()=>{
            // 程式設計式導航
            this.$router.push('/')
        }, 3000)
    }
}
</script>

測試:

瀏覽器輸入: http://localhost:8080/#/pay

頁面顯示“支付成功,三秒後自動跳轉到首頁”,過三秒,頁面跳轉到首頁。

命名路由

有時候,通過一個名稱來標識一個路由顯得更方便一些,特別是在連結一個路由,或者是執行一些跳轉的時候。你可以在建立 Router 例項的時候,在 routes 配置中給某個路由設定名稱。

需求:給首頁路由起一個名字,新建一個元件(NamedRouter),元件中可以通過命名路由,使用連結(<router-link></router-link>)或方法跳轉到首頁

// views/NamedRouter.vue
<template>
  <div>
    <p>
      <!-- 通過命名路由跳轉 -->
      <router-link :to="{ name: 'home-page' }">連結跳轉</router-link>
    </p>
    <p>
      <button @click="handleClick">程式設計式跳轉</button>
    </p>
  </div>
</template>

<script>
export default {
    methods: {
        handleClick: function(){
            this.$router.push({ name: 'home-page'})
        }
    }
}
</script>

index.js:

// 新增
import NamedRouter from '../views/NamedRouter'

const routes = [  
  // 修改
  {
    path: '/',
    // 命名路由
    name: 'home-page',
    component: Home
  },
  // 新增
  // 瀏覽器輸入:http://localhost:8080/namedRouter
  {
    path: '/namedRouter',
    component: NamedRouter
  },
]

自行測試即可

命名檢視

有時候想同時 (同級) 展示多個檢視,而不是巢狀展示,例如建立一個佈局,有 sidebar (側導航) 和 main (主內容) 兩個檢視,這個時候命名檢視就派上用場了。你可以在介面中擁有多個單獨命名的檢視,而不是隻有一個單獨的出口。如果 router-view 沒有設定名字,那麼預設為 default。

用法1-命名檢視

直接上程式碼:

// src/App.vue
<template>
  <div id="app">
    <!-- 定義兩個檢視(sidebar 和 main) -->
    <router-view class="sidebar" name='sidebar'></router-view>
    <router-view class="main" name="main"></router-view>
  </div>
</template>
// views/TestMain.vue
<template>
  <p>我是 TestMain</p>
</template>
// views/TestSidebar.vue
<template>
  <p>我是 TestSidebar</p>
</template>
// router/index.js
// 新增
import TestSidebar from '../views/TestSidebar'
import TestMain from '../views/TestMain'

const routes = [     
  // 修改               
  {
    path: '/',
    components: {
      main: TestMain,
      sidebar: TestSidebar
    },
    name: 'home-page'                  
  },
  ...
]

測試:

瀏覽器訪問:http://localhost:8080/

頁面顯示:
我是 TestSidebar

我是 TestMain

用法2-巢狀命名檢視

需求:某元件有兩個檢視,元件A,元件B分別放在這兩個檢視中

直接上程式碼:

// App.vue
<template>
  <div id="app">
    <router-view />
  </div>
</template>
// views/TestHome.vue
<template>
  <div class="test-home">
    <!-- 定義兩個檢視(sidebar 和 main) -->
    <router-view class="sidebar" name="sidebar"></router-view>
    <router-view class="main" name="main"></router-view>
  </div>
</template>
// router/index.js
// 新增
import TestSidebar from '../views/TestSidebar'
import TestMain from '../views/TestMain'
import TestHome from '../views/TestHome'

const routes = [      
  // 新增              
  {
    path: '/',
    component: TestHome,
    children: [
      {
        // path 為空,則能匹配 /
        // 如果 path 不為空(xx1),則只能匹配 /xx1
        path: '',
        components: {
          main: TestMain,
          sidebar: TestSidebar
        }
        
      }
    ],
    // 命名路由
    name: 'home-page'                  
  },
  ...
]

TestMain.vue 和 TestSidebar.vue 不變。

自行測試即可。

重定向和別名

重定向

需求:訪問支付(/pay),重定向到主頁(/)。

const routes = [ 
  { 
    path: '/pay', 
    redirect: '/' 
  }
]

測試:

輸入:http://localhost:8080/#/pay
變成:http://localhost:8080/#/

別名

“重定向”的意思是,當使用者訪問 /a 時,URL 將會被替換成 /b,然後匹配路由為 /b,那麼“別名”又是什麼呢?

/a 的別名是 /b,意味著,當使用者訪問 /b 時,URL 會保持為 /b,但是路由匹配則為 /a,就像使用者訪問 /a 一樣。

“別名”的功能讓你可以自由地將 UI 結構對映到任意的 URL,而不是受限於配置的巢狀路由結構。

需求:新增元件(Apple),裡面有個子元件(AppleComponentA),給子元件的路由起一個別名,方便訪問。

// views/Apple.vue
<template>
  <div>
    <p>蘋果</p>
    <router-view></router-view>
  </div>
</template>
// views/AppleComponentA.vue
<template>
  <p>我是嘎嘎果</p>
</template>
// router/index.js
// 新增
import Apple from '../views/Apple'
import AppleComponentA from '../views/AppleComponentA'

const routes = [                    
  // 新增
  {
    path: '/apple',
    component: Apple,
    children: [
      {
        path: 'ca/x1/x2',
        // 別名
        alias: '/cxx',
        component: AppleComponentA
      }
    ]
  }
]

執行:

瀏覽器輸入: 
http://localhost:8080/apple/ca/x1/x2
或
http://localhost:8080/cxx

頁面輸出:
蘋果

我是嘎嘎果

路由元件傳參

在元件中使用 $route 會使之與其對應路由形成高度耦合,從而使元件只能在某些特定的 URL 上使用,限制了其靈活性。

使用 props 將元件和路由解耦

需求:定義一個元件,通過 props 接收路由引數

// views/RouterToParams.vue
<template>
  <p>路由傳參 id={{ id }}</p>
</template>
<script>

export default {
    props:['id']
}
</script>
// router/index.js
// 新增
import RouterToParams from '../views/RouterToParams'

const routes = [  
  // 新增
  {
    path: '/routerToParams/:id',
    component: RouterToParams,
    props: true
  },   
]

執行:

瀏覽器輸入: http://localhost:8080/routerToParams/2

頁面輸出:
路由傳參 id=2

物件模式

如果 props 是一個物件,它會被按原樣設定為元件屬性。當 props 是靜態的時候有用。

改為物件模式,直接上程式碼:

// router/index.js
const routes = [
  {
    path: '/routerToParams/:id',
    component: RouterToParams,
    // props: true
    props: { id2: 10 }
  },
]
// views/RouterToParams.vue
<template>
  <div>
    <p>路由傳參 id={{ id }}</p>
    <p>路由傳參 id2={{ id2 }}</p>
  </div>
</template>
<script>

export default {
    props:['id2', 'id']
}
</script>

測試:

瀏覽器輸入:http://localhost:8080/routerToParams/2
頁面輸出:
路由傳參 id=

路由傳參 id2=10

函式模式

你可以建立一個函式返回 props。這樣你便可以將引數轉換成另一種型別,將靜態值與基於路由的值結合等等。

改為函式模式,直接上程式碼:

// router/index.js
const routes = [
  {
    path: '/routerToParams/:id',
    component: RouterToParams,
    props: route => ({ id3: route.params.id })
  },
]
// views/RouterToParams.vue
<template>
  <div>
    <p>路由傳參 id3={{ id3 }}</p>
  </div>
</template>
<script>

export default {
    props:['id3']
}
</script>

測試:

瀏覽器輸入:http://localhost:8080/#/routerToParams/2

頁面顯示:
路由傳參 id3=2

HTML5 History 模式

vue-router 預設 hash 模式,如果不想要很醜的 hash,我們可以用路由的 history 模式。

改為 history 模式:

// router/index.js
const router = new VueRouter({
  mode: 'history',
  routes
})

Tip:history 模式還需要一些配置

導航守衛

“導航”表示路由正在發生改變。

正如其名,vue-router 提供的導航守衛主要用來通過跳轉或取消的方式守衛導航。有多種機會植入路由導航過程中:全域性的, 單個路由獨享的, 或者元件級的。

引數或查詢的改變並不會觸發進入/離開的導航守衛。你可以通過觀察 $route 物件來應對這些變化,或使用 beforeRouteUpdate 的元件內守衛。

全域性前置守衛

需求:使用 router.beforeEach 註冊全域性前置守衛,如果訪問的是登入(/login)則進入註冊頁(/register)

// router/index.js
import Register from '../views/Register'

const routes = [  
  {
    path: '/register',
    component: Register
  }
]

// 導航
router.beforeEach((to, from, next) => {
  if (to.path === '/login') next({ path: '/register' })
  // next: Function: 一定要呼叫該方法來 resolve 這個鉤子
  else next()
})

測試:

瀏覽器輸入: http://localhost:8080/login 變為 http://localhost:8080/register

其他導航守衛請參考官網:

  • 全域性後置守衛
  • 路由獨享的守衛
  • 元件內的守衛
  • 全域性解析守衛

完整的導航解析流程

  1. 導航被觸發。
  2. 在失活的元件裡呼叫 beforeRouteLeave 守衛。
  3. 呼叫全域性的 beforeEach 守衛。
  4. 在重用的元件裡呼叫 beforeRouteUpdate 守衛 (2.2+)。
  5. 在路由配置裡呼叫 beforeEnter。
  6. 解析非同步路由元件。
  7. 在被啟用的元件裡呼叫 beforeRouteEnter。
  8. 呼叫全域性的 beforeResolve 守衛 (2.5+)。
  9. 導航被確認。
  10. 呼叫全域性的 afterEach 鉤子。
  11. 觸發 DOM 更新。
  12. 呼叫 beforeRouteEnter 守衛中傳給 next 的回撥函式,建立好的元件例項會作為回撥函式的引數傳入。

路由元資訊

Tip:直接根據官網例子來說一下

定義路由的時候可以配置 meta 欄位:

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      children: [
        {
          path: 'bar',
          component: Bar,
          // a meta field
          meta: { requiresAuth: true }
        }
      ]
    }
  ]
})

那麼如何訪問這個 meta 欄位呢?

首先,我們稱呼 routes 配置中的每個路由物件為 路由記錄。路由記錄可以是巢狀的,因此,當一個路由匹配成功後,他可能匹配多個路由記錄

例如,根據上面的路由配置,/foo/bar 這個 URL 將會匹配父路由記錄以及子路由記錄。

一個路由匹配到的所有路由記錄會暴露為 $route 物件 (還有在導航守衛中的路由物件) 的 $route.matched 陣列。因此,我們需要遍歷 $route.matched 來檢查路由記錄中的 meta 欄位。

下面例子展示在全域性導航守衛中檢查元欄位:

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // this route requires auth, check if logged in
    // if not, redirect to login page.
    if (!auth.loggedIn()) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next() // 確保一定要呼叫 next()
  }
})

如果路由記錄中的 meta.requiresAuth 為 true,則需要驗證

後設資料,用於描述資料的資料。

過渡動效

<router-view> 是基本的動態元件,所以我們可以用 <transition> 元件給它新增一些過渡效果。
Transition 的所有功能(vue 官網中的“進入/離開 & 列表過渡”)在這裡同樣適用。

請看示意程式碼:

<template>
  <div id="app">
    <p>
      <router-link to='/login'>登入</router-link> |
      <router-link to='/'>首頁</router-link>
    </p>
    <transition name="fade">
      <router-view/>
    </transition>
  </div>
</template>
<style >
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>

點選登入首頁就能看到動畫。

Tip:上面的用法會給所有路由設定一樣的過渡效果,還有單個路由的過渡,以及基於路由的動態過渡。

資料獲取

有時候,進入某個路由後,需要從伺服器獲取資料。例如,在渲染使用者資訊時,你需要從伺服器獲取使用者的資料。我們可以通過兩種方式來實現:

  • 導航完成之後獲取:先完成導航,然後在接下來的元件生命週期鉤子中獲取資料。在資料獲取期間顯示“載入中”之類的指示。

  • 導航完成之前獲取:導航完成前,在路由進入的守衛中獲取資料,在資料獲取成功後執行導航。

從技術角度講,兩種方式都不錯 —— 就看你想要的使用者體驗是哪種。

Tip:更具體的資訊可以參考官網

滾動行為

使用前端路由,當切換到新路由時,想要頁面滾到頂部,或者是保持原先的滾動位置,就像重新載入頁面那樣。 vue-router 能做到,而且更好,它讓你可以自定義路由切換時頁面如何滾動。

: 這個功能只在支援 history.pushState 的瀏覽器中可用。

當建立一個 Router 例項,你可以提供一個 scrollBehavior 方法:

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return 期望滾動到哪個的位置
  }
})

Tip:更具體的資訊可以參考官網

其他章節請看:

vue 快速入門 系列

相關文章