Express.js 路由：如何防止重新加载上一页？答案

【问题标题】：Express.js routing: how to prevent reloading of previous page?Express.js 路由：如何防止重新加载上一页？
【发布时间】：2020-01-19 01:37:52
【问题描述】：

我是新来表达（或一般的 Web 开发）并且对路由有疑问。我正在使用纯 JS 在 Firebase 上创建一个 Web 应用程序，并在 Firebase 云功能上使用路由。路由部分如下所示。目的是，当URL为/xxxxxx形式时，发送profile html页面，当URL为r/xxxxxx时，发送posts html页面。然后将完成客户端渲染以填充其他数据以构成页面。以下是部分代码：

exports.webAPI = functions.https.onRequest(app);
    app.get('/:id', (req, res) => {
        res.set('Cache-Control', 'public, max-age=86400, s-maxage=86400');
        res.status(200).sendFile(path.join(__dirname+'/app/profile.html'));
    });
    app.get('/r/:post', (req, res) => {
        res.set('Cache-Control', 'public, max-age=86400, s-maxage=86400');
        res.status(200).sendFile(path.join(__dirname+'/app/post.html'));
    });

问题是：每当用户点击帖子然后返回个人资料页面时，整个页面都会重新呈现。这对于现代 Web 应用世界中的用户体验非常不利，这是可以理解的。

问题：我如何防止重新加载上一页，除非对它进行有意义的更改（例如上传新帖子？）？有没有办法在 Express 中做到这一点？如果有更好的代码版本可以做到这一点，请告诉我。如果我需要查看文档的某些部分，请告知。或者，如果 Express 无法做到这一点，我应该看看别的东西，请指导我在哪里看。谢谢！

【问题讨论】：

如果您只是想向服务器发送数据或从服务器获取数据而不在客户端中呈现任何内容或更改当前页面，则使用 Ajax 调用而不是使用 Javascript 发送数据通过点击链接。

标签： javascript node.js firebase express routing

【解决方案1】：

安装 axios 包。在我的场景中，我正在尝试注册表格。所以这一切我需要在不刷新页面的情况下进行注册。

const register = async (name, email, password, passwordConfirm) => {
    try {
        const res = await axios({
            method: "POST",
            url: "your url",
            data: {
                name,
                email,
                password,
                passwordConfirm
            }
        });
        console.log(res);
        if (res.data.status === "success") {
            alert("You are registered succesfully");
            window.setTimeout(() => {
                location.assign("/");
            }, 1500);
        }
    } catch (error) {
        alert(error.response.data.message);
        console.log(error);
    }
};

document.querySelector("#registerform").addEventListener("submit", e => {
    e.preventDefault();
    const name = document.getElementById("name").value;
    const email = document.getElementById("email").value;
    const password = document.getElementById("password").value;
    const passwordConfirm = document.getElementById("confirmPassword")
    .value;
    register(name, email, password, passwordConfirm);
});

注意：e.preventdefault 起主要作用。

【讨论】：