在颤动中获取当前路由路径

在一个单页应用程序中，我们需要通过 JavaScript 来动态地读取 URL，这个过程便称为路由。在某些场景下，我们也需要获取当前的路由路径，以便做出不同的处理，这个时候就需要使用到 window.location 对象。

使用 window.location 对象

window.location 对象包含了当前 URL 的所有信息。我们可以通过该对象来获取当前页面的 URL、协议、主机名、端口号、路径、参数等。其中，我们在本文中重点介绍如何获取当前页面路径。

获取当前页面路径十分简单，只需要使用 window.location.pathname 属性即可。下面是一个简单的代码示例：

console.log(window.location.pathname); // 输出当前路由路径

该代码会在控制台上输出当前页面的路径，例如 /about 或者 /user/123 等。

考虑页面颤动中的问题

在某些单页应用中，可能会有一些页面颤动的效果，即在页面重载或者响应式设计下，有短暂的页面空白或者其他效果。这种情况下，我们如果简单地通过上面的代码获取路径，可能会遇到问题。

为了更好地处理这种情况，我们可以通过监听 popstate 事件来获取当前路径。 popstate 事件在在 URL 栏内容变化时会被触发。我们可以添加 history.pushState() 方法，显式地修改 URL 栏的内容，这样我们就可以在任何时候获取当前的路由路径。

下面是一个示例代码片段：

window.onpopstate = function (event) {
  console.log(window.location.pathname);
};

当 URL 栏内容变化时会触发该函数，我们可以在控制台中输出当前路径，以此来避免页面颤动对获取当前路径的影响。

结论

通过 window.location.pathname 属性，我们可以简单地获取当前路由路径。在页面颤动的情况下，我们可以通过监听 popstate 事件来避免页面颤动对获取当前路径的影响。