2024-12-25 旅行分帳應用程式-設定路由

發表於 閱讀次數：
2024-12-25 旅行分帳應用程式-設定路由

2024-12-25 旅行分帳應用程式-設定路由

好的！你的 Vue 元件名稱是 **SplitBill.vue**，那麼你的專案應該是這樣的結構： 

1
2
3
4
5
6
src/
  lily_learning/
    202404_js_trainging/
      javascript_8/
        splitBill_components/
          SplitBill.vue  <-- 這是你的元件

🚀 下一步

我們需要把這個 SplitBill.vue 元件正確地運行，你可以這樣做：

📌 1️⃣ 確保 Vue 專案正在執行

你的專案應該是用 Vite 建立的，那麼請先在終端機（Terminal）裡輸入：

1
npm run dev

這樣你的 Vue 開發伺服器就會啟動，然後你可以在 http://localhost:5173/ 看到你的應用程式。

📌 2️⃣ 確保 SplitBill.vue 被匯入並使用

如果 SplitBill.vue 是一個 元件（Component），那麼你需要在 App.vue 裡 匯入 它並使用：

修改 App.vue

1
2
3
4
5
6
7
<script setup>
import SplitBill from "./splitBill_components/SplitBill.vue"; // 確保路徑正確
</script>

<template>
  <SplitBill />
</template>

這樣 App.vue 就會**正確載入 SplitBill.vue**，然後在瀏覽器上顯示。

📌 3️⃣ 如果 SplitBill.vue 是獨立頁面

如果你希望 SplitBill.vue 是一個獨立的頁面（而不是 App.vue 裡的元件），你需要使用 Vue Router。

請先確保專案有安裝 Vue Router：

1
npm install vue-router

然後設定路由，讓 SplitBill.vue 作為某個頁面：

router.js

1
2
3
4
5
6
7
8
9
10
11
12
13
import { createRouter, createWebHistory } from "vue-router";
import SplitBill from "./splitBill_components/SplitBill.vue";

const routes = [
  { path: "/", component: SplitBill } // 讓 `SplitBill.vue` 成為首頁
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

在 main.js 啟用路由

1
2
3
4
5
6
7
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router"; // 匯入 router.js

const app = createApp(App);
app.use(router);
app.mount("#app");

📌 4️⃣ 重新啟動專案

如果你改了路由，請記得重新啟動開發伺服器：

1
npm run dev

然後你可以打開 http://localhost:5173/ 來測試你的 SplitBill.vue 🎉

🔜 下一步

現在你的 Vue 元件應該可以跑起來了！
👉 步驟 3：新增「支出款項」功能，讓成員可以記錄誰付了錢！ 🎯