用 Vue Router 實作網頁切換(上)

認識 Vue Router & 搭建環境

📢 Vue Router 系列文章分為上、中、下 (共 3 篇)

📋 目錄

1. Vue Router 介紹
2. 搭建環境 & Vue Router 安裝
3. 專案結構說明
4. [實作] 新增自定義頁籤

Vue Router 介紹

Vue Router 是 Vue.js 官方提供的路由管理工具。過去頁面切換多透過後端處理，而 Vue Router 可以由前端模擬路由實現單頁式應用(Single Page Application)，切換畫面時即不需要向後端發出請求。

搭建環境 & Vue Router 安裝

1. 安裝Node.js

🔎 Node官網下載
開起終端機並輸入以下內容，如有顯示版號則表示安裝成功。

• node: node -v
• npm: npm -v

🔖 補充說明
node.js:能夠在伺服器端運行JavaScript的開放原始碼、跨平台執行環境。
npm:隨同node.js一起安裝的管理工具，進行套件的安裝及管理。

2. 安裝Vue

🔎 Vue.js官網下載(此範例屬 Vue2 版本)
使用 Vue 構建大型應用時，推薦使用 NPM 安裝。

$ npm install vue

NPM 能很好地和諸如 Webpack 或 Browserify 的CommonJS模塊打包器配合使用。Vue.js 也提供配套工具來開發單文件組件。

🔖 補充說明
使用Vue構建小型應用，可用cdn方式引用至html檔案。
<script src=”https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

3. 安裝Vue CLI

Vue CLI 由 Vue.js 團隊開發，提供開發者快速建置 Vue 專案並整合相關工具鍊的指令列(Command Line)工具。內建 Hot Reload、 ES Lint 與 dec-Server等功能。

$ npm install -g @vue/cli

4. 建立Vue專案

開起終端機至欲建立專案的路徑，輸入下方指令。
(my-vue-router-project 為範例專案名稱，可以修改成自己想要的檔名)

$ vue create my-vue-router-project

建立的過程中會出現：

❓Please pick a preset:
➡️ Manually select features
❓Check the features needed for your project:
➡️ Babel, Router, Linter/Formatter
❓Choose a version of Vue.js that you want to start the project with:
➡️ 2.x

🔖 補充說明
Babel:JavaScript 轉譯器，可將ES6+程式碼轉為等效的ES5程式碼
Router:Vue.js官方的路由管理器，協助SPA實現
Linter/Formatter:編碼風格檢查

專案結構說明

專案結構說明

專案結構介紹如上圖，可以至終端機輸入下方指令。

$ cd my-vue-router-project
$ npm run serve

開啟瀏覽器，網址輸入 http://localhost:8080 進入首頁。
畫面上方有 Home | About可以切換，點選同時可以注意一下URL的變化。

專案首頁畫面

main.js
可以看到 router 被引用。

App.vue
<router-link>組件支持用戶在具有路由功能的應用中(點擊)導航。通過to屬性指定目標地址。
<router-view />顯示 SPA 畫面，當有更動時不會全部重新讀取，只會渲染有更改的部分。

🔖 補充說明
假設不使用 <router-link> 改用 <a> tag，若有更動畫面會全部重新渲染。

router/index.js
Vue Router 是插件，在 Vue 對象中進行註冊，使用 Vue.use() 進行註冊。(前面配置動作已預先註冊)其中 routes 的設定，可看到 about 區塊，使用延遲載入( Lazy Loading) 寫法，將程式碼區塊拆分成不同元件，用到時才會進行讀取檔案的動作，有助於提升專案運作效能。

[實作] 加上自定義頁籤

有了基本概念之後，進到實作的部分🛠
🚩 基於預設的檔案上，加上自定義頁籤，藉此更熟悉 Vue Router 檔案配置
🚩 實作練習的主題設定為 Travels ⚓

s️tep1 加入 Travels.vue 檔案

views 資料夾中加入 Travels.vue 檔案，並貼上以下程式碼。

s️tep2 新增router-link

App.vue 檔案，先找到<router-link to="/about">About<router-link /> ，後方加上｜ (區隔線)以及<router-link to="/travels">Travels<router-link />

s️tep3 修改 index.js檔案

router/index.js 檔案，上方引入 Travels.vue 檔案，並將相關設定放入 routes 中，完整的 index.js 程式碼如下。

🔖 補充說明
上面的寫法是採用非延遲載入。
若參考about的延遲載入寫法，上方的import Travels… 即可拿掉。

依循上述步驟，瀏覽器網址輸入 http://localhost:8080
畫面如下方影片所示 👀 請特別留意 URL 的切換

儘管畫面看起來有點陽春，初步簡易的 Vue Router 已有雛形 🙌

在下一個章節，將會延續上方的設定，為 Travels 專案加上客製化樣式，並延伸介紹嵌套路由(Nested Routes)！

🚪 前往下一章節：用 Vue Router 實作網頁切換(中)

✈️ Time to set off.