我無法使用 page.js 實現簡單的 JavaScript 應用程序的路由功能

Question

我正在嘗試了解 javascript 應用程序的小型路由庫是如何工作的 - page.js 所以我為了自己的學習目的制作了一個非常小的應用程序，但由於某種原因我無法使其正常工作。 該應用程序非常簡單 - 一個名為 test-routing 的文件夾，其中包含一個文件和一個文件夾 - index.html 和 src； src 文件夾也有一個文件 - app.js 和另一個文件夾 - views，其中有 3 個文件 - home.js、page1.js 和 page2.js

html 文件有空的 body 標簽，在 head 標簽中我這樣寫： <script src="./src/app.js" type="module"></script>

在 app.js 中有這個：

import page from '../node_modules/page/page.mjs';

import { home } from './views/home.js';

import { page1 } from './views/page1.js';

import { page2 } from './views/page2.js';

page('/',home);

page('/first',page1);

page('/second/:id',page2);

page.start();

views文件夾中的三個文件各有一行代碼：

主頁.js
export function home(){ console.log('HOME PAGE'); }

page1.js
export function page1(){ console.log('PAGE ONE'); }

page2.js
export function page2(context, next){ console.log('PAGE TWO', context.params.id); }

除了 page.js，我還在本地安裝了 live-server。 我運行它，它開始在端口 8080 上正常工作。

我的期望是，當我從 go 到 http://localhost:8080 時，我會在控制台中找到“HOME PAGE”，事實確實如此。

但是當我嘗試使用 http://localhost:8080/first 和 http://localhost:8080/second/2 時，我在兩種情況下都在控制台中收到了 404（未找到），而不是“第一頁”和“第二頁” 2'，它也分別打印在 web 頁面本身'Cannot GET /first'和'Cannot GET /second/2'中。

誰能告訴我哪里出錯了？

非常感謝您！

Answer 1

使用 lite-server（使用 npm 安裝）或 go 到 live-server 的設置，找到文件設置並將其設置為“/” 404（對單頁應用有用）”