single-page-application-routing-using-hash-or-url-9jh

原始地址：https://dev.to/thedevdrawer/single-page-application-routing-using-hash-or-url-9jh

‘’'前端面试中最常被问到的一个问题是：“你能否在没有框架的情况下创建带有路由的单页面应用程序？”在本教程中，我将向您展示如何使用哈希或URL方法为单页面应用程序创建自定义路由系统…无需框架。
本教程将向您展示如何使用原生JavaScript构建单页面应用程序。我将向您展示如何以易于使用的格式实现客户端路由（哈希或URL），以便在任何项目中重复使用。

在YouTube上查看

文件夹结构
我们使用基本的HTML结构。您可以根据喜好设置文件，但是为了本教程的简便性，您可以按照下面的示例进行复制。
index.html
/templates
404.html
index.html
about.html
contact.html
/js/
router.js

创建HTML
我们将创建一个基本的HTML文档作为主页面。在这个页面上，我们将有一个导航栏部分和一个内容部分。您可以根据需要构建这个部分，但需要注意的是

标签用于URL路由，因此如果使用URL方法，您的导航栏需要在这些标签中。

## [ ](https://dev.to#creating-the-js-file) 创建JS文件 在 关闭标签之前，您需要添加对上面创建的JS文件的引用。 ## [ ](https://dev.to#option-one-url-routing) 选项一：URL路由 首先，我们将介绍如何使用**URL路由**进行操作。这意味着您的链接将是这样的 /about。这是URL的典型形式。哈希方法使用 #来分隔页面。我将在下面进一步介绍它。 *用例：网站* 这种选项对于SEO来说更好，而且更用户友好。 **注意：**使用此方法存在一些缺点。您需要配置Web服务器以为SPA路由路径提供index.html。您可以在服务器级别上执行此操作，但如果使用VS Code LIVE SERVER等工具，就无法配置。这意味着如果您直接导航到/about，服务器将无法呈现文件，因为它需要先加载index.html脚本。您可以修改.htaccess文件以实现此目的。 ### [ ](https://dev.to#add-the-html-navigation) 添加HTML导航 将下面的内容添加到您的index.html文件的

标签之间。 首页 关于 联系 ### [ ](https://dev.to#add-the-navigation-links-in-html) 在HTML中添加导航链接 现在，让我们开始编写JS。首先，我们要确保在

标签中的任何链接都使用我们的路由。 // 创建一个监听仅限导航链接的文档点击事件 document.addEventListener("click", (e) => { const { target } = e; if (!target.matches("nav a")) { return; } e.preventDefault(); route(); }); ### [ ](https://dev.to#create-the-routes) 创建路由 每个路由都有一个与之关联的对象数组。这将告诉脚本URL引用是什么，以及要使用的模板、标题和描述等等信息。 const routes = { 404: { template: "/templates/404.html", title: "404", description: "页面未找到", }, "/": { template: "/templates/index.html", title: "首页", description: "这是首页", }, "/about": { template: "/templates/about.html", title: "关于我们", description: "这是关于页面", }, "/contact": { template: "/templates/contact.html", title: "联系我们", description: "这是联系页面", }, }; ### [ ](https://dev.to#create-a-function-that-watches-the-url-and-calls-the-urllocationhandler) 创建一个函数来监听URL并调用urlLocationHandler函数 const route = (event) => { event = event || window.event; // 如果没有提供event参数，则获取window.event event.preventDefault(); // window.history.pushState(state, unused, target link); window.history.pushState({}, "", event.target.href); locationHandler(); }; ### [ ](https://dev.to#create-a-function-that-handles-the-url-location) 创建一个处理URL位置的函数 const locationHandler = async () => { const location = window.location.pathname; // 获取URL路径 // 如果路径长度为0，则将其设置为主要页面路由 if (location.length == 0) { location = "/"; } // 从urlRoutes对象中获取路由对象 const route = routes[location] || routes["404"]; // 从模板中获取HTML const html = await fetch(route.template).then((response) => response.text()); // 将内容区域的内容设置为HTML document.getElementById("content").innerHTML = html; // 将文档的标题设置为路由的标题 document.title = route.title; // 将文档的描述设置为路由的描述 document .querySelector('meta[name="description"]') .setAttribute("content", route.description); }; ### [ ](https://dev.to#finishing-the-script) 完成脚本 最后，当页面首次加载时，我们需要调用该函数，否则主页将无法工作，除非点击它。我们还需要添加一个监听器来监听URL的变化，以便脚本知道何时显示新内容。 // 向窗口添加一个监听器，用于监听URL的变化 window.onpopstate = locationHandler; // 调用urlLocationHandler函数来处理初始URL window.route = route; // 调用urlLocationHandler函数来处理初始URL locationHandler(); ## [ ](https://dev.to#option-two-hash-routing) 选项二：哈希路由 *如果您使用哈希方法，请将您的router.js文件的内容替换为以下代码。* 接下来，进入第二个选项。 **哈希路由**在使用框架时更常见，但如果您从头开始创建它，则负面的SEO好处可能会让您却步。这意味着您的链接将是 #about，而不是上面典型URL方法中的形式。对于一些人来说，这种URL类型可能不是最佳选择，因为它与用户的习惯非常不同。否则，代码与URL方法非常相似......甚至更短。 *用例：应用程序、落地页* **注意：**使用此方法存在一些缺点。对于SEO来说，使用哈希可能不是最佳路线，对于某些用户来说也可能很不寻常，这可能会导致他们不使用网站。 ### [ ](https://dev.to#add-the-html-navigation) 添加HTML导航 将下面的内容添加到您的index.html文件的

标签之间。 首页 关于 联系 ### [ ](https://dev.to#create-the-routes) 创建路由 哈希路由与上面的URL路由非常相似。您可以重用脚本的这部分代码。不同之处主要在于路由链接键的定义方式。 const routes = { 404: { template: "/templates/404.html", title: "404", description: "页面未找到", }, "/": { template: "/templates/index.html", title: "首页", description: "这是首页", }, about: { template: "/templates/about.html", title: "关于我们", description: "这是关于页面", }, contact: { template: "/templates/contact.html", title: "联系我们", description: "这是联系页面", }, }; ### [ ](https://dev.to#create-a-function-that-handles-the-url-location) 创建一个处理URL位置的函数 const locationHandler = async () => { // 获取URL路径，并将哈希替换为空字符串 var location = window.location.hash.replace("#", ""); // 如果路径长度为0，则将其设置为主要页面路由 if (location.length == 0) { location = "/"; } // 从routes对象中获取路由对象 const route = routes[location] || routes["404"]; // 从模板中获取HTML const html = await fetch(route.template).then((response) => response.text()); // 将内容区域的内容设置为HTML document.getElementById("content").innerHTML = html; // 将文档的标题设置为路由的标题 document.title = route.title; // 将文档的描述设置为路由的描述 document .querySelector('meta[name="description"]') .setAttribute("content", route.description); }; ### [ ](https://dev.to#finishing-the-script) 完成脚本 同样，我们需要在页面首次加载时调用该函数，否则主页将无法工作，除非点击它。我们还需要添加一个监听器来监听哈希的变化，以便脚本知道何时显示新内容。 // 创建一个函数，用于监听哈希的变化并调用urlLocationHandler window.addEventListener("hashchange", locationHandler); // 调用urlLocationHandler来加载页面 locationHandler(); ## [ ](https://dev.to#conclusion) 结论 虽然有许多方法可以实现这一目标，但是这是您需要了解的两种方法，以成为一名更好的前端开发人员。一旦您掌握了这些知识，您可以进一步学习React或Vue等框架。所以希望这些简单但至关重要的学习方法能够帮助您在文章开头的令人头痛的面试问题上取得成功。祝您好运！ 在[DevDrawer](https://thedevdrawer.com)上阅读更多文章 '''