EP47 - 路由

Routing 路由！原本以為後端有路由，上次查了一下
原來前端也有路由，運作方法不同，所以不會衝突
來研究看看吧～

前端路由 vs. 後端路由 - Client-Side vs. Server-Side Routing​

後端路由意味著伺服器會根據用戶訪問的 URL 路徑發送相應的回應。當我們在傳統的伺服器渲染的網頁應用中點擊一個連結時，瀏覽器會從伺服器接收到一個 HTML 回應，並重新加載整個頁面以顯示新的 HTML。

然而，在單頁應用（SPA）中，前端的 JavaScript 可以攔截導航操作，動態地獲取新數據，並在不重新加載整個頁面的情況下更新當前頁面。這通常會帶來更靈敏的用戶體驗，尤其適用於類似實際「應用程式」的情境，這些應用程式預期用戶會進行長時間的多次互動。

在這樣的 SPA 中，「路由」是在瀏覽器端進行的。前端路由器負責使用瀏覽器的 API（例如 History API 或 hashchange 事件）來管理應用程式的顯示視圖。

官方路由器 - Official Router​

Vue 非常適合構建單頁應用（SPA）。對於大多數 SPA，建議使用官方支持的 Vue Router 庫。更多詳細信息，請參閱 Vue Router 的文檔。

從零開始的簡單路由 - Simple Routing from Scratch​

如果你只需要非常簡單的路由，不想使用全功能的路由庫，可以使用動態組件並透過監聽瀏覽器的 hashchange 事件或使用 History API 來更新當前的組件狀態。

這裡是一個簡單的例子：

<script setup>
import { ref, computed } from 'vue'
import Home from './Home.vue'
import About from './About.vue'
import NotFound from './NotFound.vue'

const routes = {
  '/': Home,
  '/about': About
}

const currentPath = ref(window.location.hash)

window.addEventListener('hashchange', () => {
  currentPath.value = window.location.hash
})

const currentView = computed(() => {
  return routes[currentPath.value.slice(1) || '/'] || NotFound
})
</script>

<template>
  <a href="#/">Home</a> |
  <a href="#/about">About</a> |
  <a href="#/non-existent-path">Broken Link</a>
  <component :is="currentView" />
</template>

Try it in the playground

來一個簡單的前後端路由範例？

以下是一個簡單的例子，展示前端路由和後端路由如何協作。假設我們有一個用於顯示用戶資料的單頁應用（SPA），並且後端提供了一個 API 來獲取用戶信息。

前端代碼（Vue.js）

<template>
  <div>
    <h1>用戶資料</h1>
    <router-link to="/">回到首頁</router-link>
    <router-link to="/user/1">查看用戶 1</router-link>
    <router-link to="/user/2">查看用戶 2</router-link>

    <component :is="currentView"></component>
  </div>
</template>

<script setup>
import { ref, defineAsyncComponent } from 'vue'
import { useRoute } from 'vue-router'

// 根據路由動態加載用戶資料組件
const route = useRoute()
const currentView = defineAsyncComponent(() => import(`./UserProfile.vue`))

// 監聽路由變化
const userId = ref(route.params.id)
</script>

用戶資料組件（UserProfile.vue）

<template>
  <div v-if="user">
    <h2>{{ user.name }}</h2>
    <p>{{ user.email }}</p>
  </div>
  <div v-else>
    <p>載入中...</p>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const props = defineProps(['userId'])
const user = ref(null)

onMounted(async () => {
  const response = await fetch(`https://api.example.com/users/${props.userId}`)
  user.value = await response.json()
})
</script>

後端路由（Node.js Express）

const express = require('express')
const app = express()

// 模擬用戶資料
const users = {
  1: { name: 'Alice', email: 'alice@example.com' },
  2: { name: 'Bob', email: 'bob@example.com' },
}

// 定義 API 路由
app.get('/api/users/:id', (req, res) => {
  const user = users[req.params.id]
  if (user) {
    res.json(user)
  } else {
    res.status(404).send('用戶未找到')
  }
})

// 啟動伺服器
app.listen(3000, () => {
  console.log('伺服器在 http://localhost:3000 上運行')
})

流程說明

1. 前端路由：用戶在 SPA 中點擊 "查看用戶 1" 的鏈接，前端路由會將 URL 更新為 /user/1，並動態加載 UserProfile 組件。
2. 用戶資料組件：在 UserProfile 組件中，onMounted 鉤子會根據 URL 中的用戶 ID 發送請求到後端 API (/api/users/1)。
3. 後端路由：後端接收到請求後，根據路由處理函數查找用戶資料並返回 JSON 格式的數據。
4. 更新前端內容：前端收到用戶資料後，更新 UserProfile 組件中的 user 變數，顯示用戶的名稱和電子郵件。

這樣，前端路由和後端路由就可以協同工作，實現流暢的用戶體驗。用戶在應用中導航時，不會重新加載整個頁面，而是根據需要動態請求和顯示數據。

有詢問ＡＩ講解一個範例之後才比較了解～
等之後來實作看看拉！
最近天氣變冷，晚上越來越想睡覺了www