什么是客户端路由以及它如何使用？

14 浏览
0 Comments

什么是客户端路由以及它如何使用？

如果有人能回答以下问题，我会很高兴：

1. 它是如何工作的？

2. 为什么它是必要的？

3. 它能改善什么？

0

3 答案

0 Comments

客户端路由与服务器端路由相同，但是在浏览器中运行。

在典型的Web应用程序中，有几个页面映射到不同的URL，并且每个页面都有一些逻辑和一个模板，然后进行渲染。

客户端路由只是在浏览器中运行此过程，使用JavaScript进行逻辑处理，并使用一些基于JavaScript的模板引擎或其他方法来渲染页面。

通常在单页应用程序中使用，其中服务器端代码主要用于通过Ajax提供给客户端代码使用的RESTful API。

好了，但是浏览器对每个路由都发出请求（除非使用#routing）...那么这是如何工作的？服务器是否以404作为响应，然后路由接管这一点？

...也许它不会向服务器请求URL，而是路由库拦截它-在我的某个应用程序的开发工具中查找，似乎没有向服务器发送路由请求。

0
0 Comments

客户端路由是什么以及如何使用它？

在构建单页面应用程序时，我了解到了客户端路由。通过实现客户端路由，我能够实现以下功能：

1. 浏览器中的前进和后退按钮开始在我的单页JavaScript应用程序中起作用。这在从移动浏览器访问页面时非常重要。

2. 用户能够添加书签/分享之前无法实现的URL。

0
0 Comments

什么是客户端路由以及它的使用方式？

在传统的网页应用中，当用户点击一个锚点标签时，浏览器会向服务器发送一个请求，然后加载一个新的页面。但是，通过使用"event.preventDefault();"，我们可以拦截这个事件并阻止浏览器发送请求到服务器。通过这种方式，我们可以实现客户端路由（Client-Side Routing，CSR），在不刷新整个页面的情况下，动态加载不同的内容。

下面的代码片段是React Router官方网站上的一个示例：

 {
    // 阻止浏览器改变URL并请求新文档
    event.preventDefault();
    // 将一个条目推入浏览器历史堆栈并改变URL
    window.history.pushState({}, undefined, "/contact");
  }}
/>

除了拦截锚点标签的点击事件外，我们还需要监听浏览器前进和后退按钮的点击事件，可以通过以下代码实现：

window.addEventListener("popstate", () => {
  // URL发生变化！
});

通过上述两个代码片段，你可以想象出如何实现客户端路由。当然，实际的实现要复杂得多，这就是为什么存在像React Router这样的库和像Angular这样的Web框架提供默认的客户端路由功能。

如果你想了解更多信息，请访问以下链接，它将带你进入React Router的概念页面：

[https://reactrouter.com/docs/en/v6/getting-started/concepts](https://reactrouter.com/docs/en/v6/getting-started/concepts)

此外，如果你想深入了解这个主题，你可以查看Angular路由器的代码。比较这两种实现方式将能更深入地理解客户端路由的原理。

0