javascript - 如何处理 firebase 托管中的动态链接？

Question

我使用 firebase 托管来托管我的网站。最近我实现了一个证明概念网站，通常仅使用 index.html 和 style.js 运行。

功能信息: 用于托管整个小型网站的单个 HTML+JS 文件。我可以使用 javascript 请求修改 html 正文内容。但问题出在浏览器中的重新加载按钮。例如，如果我单击“关于”菜单按钮，那么 JS 函数将从后端获取“关于”的数据并显示。显示网址将为 https://some.domain/about 。

现在如果我刷新页面，

1. 默认会跳转到404页面。
2. 我在 firebase.json 中使用了以下重定向。但结果是https://some.domain而不是https://some.domain/about具有正确的内容页面，例如按“关于”按钮时显示的内容。

代码:

1. 通过 history.pushState(null, null, 手动更改 URL/关于 );

2. 重定向 firebase.json

   “重定向”:[ { “来源”:“/关于”， “目的地”: ”/”， “类型”:301 }]

我想保留动态功能，同时我想在地址栏中保留特定的网址以及该特定网址的内容。

我怎样才能完成它？

Answer 1

使用rewrites :

When a browser attempts to open a specified source URL, it will be given the contents of the file at the destination URL.

"hosting": {
  // ...

  // Add the "rewrites" attribute within "hosting"
  "rewrites": [ {
    // Serves index.html for requests to files or directories that do not exist
    "source": "**",
    "destination": "/index.html"
  }, {
    // Serves index.html for requests to both "/foo" and "/foo/**"
    // Using "/foo/**" only matches paths like "/foo/xyz", but not "/foo"
    "source": "/foo{,/**}",
    "destination": "/index.html"
  }, {
    // Excludes specified pathways from rewrites
    "source": "!/@(js|css)/**",
    "destination": "/index.html"
  } ]
}