如何使用 Vue Router 打造單頁應用(SPA)

logo

 

一直以來我們在網頁上的體驗大部分皆為點擊連結->伺服器產生結構->回應視圖,在現今越來越嚴苛的瀏覽體驗上這是相當不合格且沒有效率的,撇開載入期間的空白畫面不說,對高流量的網站伺服器也是一大挑戰,所以前端也漸漸發展出了 route 概念:

 

既然 Server 可以利用 URL 來展示不同頁面內容,那我為什麼不能呢?

 

於是 client 端的 Router 就誕生了。

也打破了舊有觀念及使用者體驗,並且在現今行動優先及行動裝置效能皆大幅提升的情況下展示出了比傳統 Web更好的流暢度及更低負載。

以下將會利用 Vue.js 搭配 VueRouter 來製作一個簡單的範例(由於 2.0 即將發布,所以以下將會使用 2.0 RC):

# 建立元件

 

首先我們將先建立一個 DOM 元件以用來掛載 Vue,並在其中建立<router-view>以呈現我們在不同路由中所要呈現的畫面或資料,

並透過<router-link>來建立路由連結,請注意在 2.0版本中 link的變動:

 

由 <a v-link=”{ path: ‘/foo’ }”> 改動為 <router-link to=”/foo”>

 

2.0 中的  link 語法更加流暢、口語化了。

 

# 建立組件(Component)

 

組件是 Vue 最強大的功能之一,組件可以擴展HTML元素,封裝可用的代碼。在較高的層級中,組件是自定義元素,Vue 的編輯器為他加入特殊功能。在有些情況下,組件也可以以原生HTML 元素的形式,以 is 的特性擴展。

我們簡單的建立 Foo及Bar組件以用來呈現不同路由中所產生的視圖。

 

# 建立路由(Vue-router)

以往的 history 配置已經被 mode 並成為一個選項,以下為 2.0 版本中 mode的選項:

  • abstract
  • hash(預設值)
  • history

 

# 實例

我們需要在 Vue 中引用 router,並掛載至 app上,如此一來我們便建立了一個含有路由的 Vue 實例。

如此一來我們便簡單的實作了透過不同路由以呈現不同內容,而實際上搭配後端 API 提供的資料及 Vue 的相關 methods 與 Vuex、typescript 等現代化的工具,我們還可以達到更多目的及更高的效能,甚至完全無需重新整理即可快速呈現所有資料,提供使用者有如原生 App般的體驗。

Panigale

喜歡 Modern Web的打造方式及簡潔優美的程式碼,也持續在學習有關於 PHP、Javascript的基本觀念及使用技術。

您可能也會喜歡…

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *