在前端开发中，我们通常会使用哈希（hash）来实现单页面应用程序（SPA）。但是，在某些情况下，使用主干航线（history）代替哈希可能更加优雅和可靠。本文将介绍主干航线的优点、缺点以及如何使用它来构建 SPA。
什么是主干航线？
主干航线是指浏览器历史记录中的 URL 路径部分，与查询字符串和哈希不同。例如，对于以下 URL：
https://example.com/path/to/page?query=string#hash
https://example.com是协议和域名部分。/path/to/page是路径部分。query=string是查询字符串部分。hash是哈希部分。
主干航线的优点
更优雅的 URL
相比于带有哈希的 URL，主干航线 URL 更加优雅和易于理解。它们也更容易被搜索引擎索引，并且可以作为书签或链接共享。
更好的用户体验
当用户使用后退和前进按钮时，主干航线可以提供更自然的体验。与哈希不同，主干航线支持浏览器历史记录的完整功能，包括前进和后退。
更可靠的服务端渲染
在服务端渲染中，使用主干航线可以更容易地识别当前请求的页面。这使得构建多页应用程序变得更加容易。
主干航线的缺点
需要服务器端支持
使用主干航线需要服务器端支持，以便能够正确地处理 URL 路径。如果你的服务器不支持主干航线，你需要进行相应的配置和修改。
无法处理静态资源
对于静态资源（如图片、样式表和脚本文件等），使用主干航线会导致浏览器尝试向服务器请求这些资源而产生404错误。解决这个问题的方法是将这些资源放在专门用于存储静态资源的目录下，并使用相对路径来引用它们。
如何使用主干航线
使用主干航线构建 SPA 主要涉及以下两个方面：路由和服务器配置。
路由
在路由方面，我们可以使用现有的库来帮助我们实现主干航线路由。例如，React 中的 react-router 和 Vue 中的 vue-router 都提供了对主干航线的支持。
在 react-router 中，你可以使用 BrowserRouter 组件来使用主干航线：
-- -------------------- ---- -------
------ - -------------- ----- - ---- -------------------
-------- ----- -
------ -
---------------
------ ----- -------- ---------------- --
------ ------------- ----------------- --
------ --------------- ------------------- --
----------------
--
-在 vue-router 中，你可以使用 mode 属性将模式设置为主干航线：
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '/', component: Home },
{ path: '/about', component: About },
{ path: '/contact', component: Contact }
]
})服务器配置
在服务器配置方面，你需要确保服务器能够正确地处理主干航线 URL。对于大多数服务器软件，你需要配置它们以便将所有请求都发送到 index.html 文件，然后交给前端路由来处理。以下是一些常见的服务器软件的示例配置：
Apache
在 .htaccess 文件中添加以下内容：
<IfModule > 来源：[JavaScript中文网](https://www.javascriptcn.com/post/15164) ，转载请注明来源 [https://www.javascriptcn.com/post/15164](https://www.javascriptcn.com/post/15164)