正文

从零开始：原生JS打造简单单页面应用路由

/0 浏览量
0831

在这个数字化时代，单页面应用（SPA）因其流畅的用户体验和快速的页面响应而受到越来越多的青睐。单页面应用的一个核心特点是其单页面路由功能，它能够在不重新加载页面的情况下，改变页面的内容和视图。本文将带您从零开始，使用原生JavaScript打造一个简单的单页面应用路由。

了解单页面应用路由

单页面应用路由是控制应用程序视图变化而不重新加载页面的技术。它通过捕获浏览器地址栏的URL变化，并动态地更新页面内容来实现。这通常涉及到以下步骤：

  1. 监听URL变化事件。
  2. 根据URL确定需要显示的页面内容。
  3. 动态更新页面内容。

创建基本项目结构

首先，创建一个基本的项目结构。假设我们创建一个名为 my-spa 的项目，其结构如下：

my-spa/
|-- index.html
|-- js/
    |-- router.js
    |-- app.js
|-- views/
    |-- home.html
    |-- about.html

在 index.html 中，我们设置基本的HTML结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Single Page App with SPA Router</title>
</head>
<body>
    <div id="app"></div>

    <script src="js/app.js"></script>
</body>
</html>

实现路由逻辑

1. 创建路由映射

在 router.js 文件中，定义一个路由映射，它将路径映射到对应的视图：

const routes = {
    '/': 'home',
    '/about': 'about'
};

function getRouteParams(path) {
    const route = Object.entries(routes).find(([key, value]) => path.startsWith(key));
    return route ? route : [null, 'home'];
}

2. 更新视图

在 router.js 中，创建一个函数来更新页面视图：

function renderView(viewName) {
    const view = document.querySelector(`#view-${viewName}`);
    const app = document.getElementById('app');

    if (view) {
        app.innerHTML = view.innerHTML;
    } else {
        const newView = document.createElement('div');
        newView.id = `view-${viewName}`;
        newView.innerHTML = `<h1>Page not found</h1>`;
        app.appendChild(newView);
    }
}

3. 监听URL变化

在 app.js 中，监听URL变化，并调用相应的视图渲染函数：

document.addEventListener('DOMContentLoaded', () => {
    const currentPath = window.location.pathname;
    const [_, viewName] = getRouteParams(currentPath);
    renderView(viewName);

    window.addEventListener('popstate', () => {
        const path = window.location.pathname;
        const [_, viewName] = getRouteParams(path);
        renderView(viewName);
    });
});

使用视图

在 views/home.html 和 views/about.html 中，创建对应的视图内容：

<!-- views/home.html -->
<div id="view-home">
    <h1>Welcome to Home Page</h1>
    <p>This is the home page content.</p>
</div>

<!-- views/about.html -->
<div id="view-about">
    <h1>About Page</h1>
    <p>This is the about page content.</p>
</div>

测试单页面应用

现在，你可以通过更改浏览器地址栏中的URL来测试路由功能：

  • 访问 http://localhost:3000/ 应该看到“Welcome to Home Page”。
  • 访问 http://localhost:3000/about 应该看到“About Page”。

通过这个简单的例子，你已经成功使用原生JavaScript实现了一个单页面应用的路由功能。当然，实际项目中可能需要更复杂的功能，例如前端路由库、异步数据加载等。但这个例子为你提供了一个很好的起点，让你了解单页面应用路由的基本原理。

-- 展开阅读全文 --