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>
來一個簡單的前後端路由範例？
以下是一個簡單的例子，展示前端路由和後端路由如何協作。假設我們有一個用於顯示用戶資料的單頁應用（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: '[email protected]' },
2: { name: 'Bob', email: '[email protected]' },
}
// 定義 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 上運行')
})
流程說明
- 前端路由：用戶在 SPA 中點擊 "查看用戶 1" 的鏈接，前端路由會將 URL 更新為
/user/1，並動態加載UserProfile組件。 - 用戶資料組件：在
UserProfile組件中，onMounted鉤子會根據 URL 中的用戶 ID 發送請求到後端 API (/api/users/1)。 - 後端路由：後端接收到請求後，根據路由處理函數查找用戶資料並返回 JSON 格式的數據。
- 更新前端內容：前端收到用戶資料後，更新
UserProfile組件中的user變數，顯示用戶的名稱和電子郵件。
這樣，前端路由和後端路由就可以協同工作，實現流暢的用戶體驗。用戶在應用中導航時，不會重新加載整個頁面，而是根據需要動態請求和顯示數據。
有詢問ＡＩ講解一個範例之後才比較了解～
等之後來實作看看拉！
最近天氣變冷，晚上越來越想睡覺了www
