详解JavaScript实现监听路由变化

2023年5月27日上午3:25 • JavaScript

那么就让我来详细讲解一下“详解JavaScript实现监听路由变化”的完整攻略吧。

一、引言

当我们使用现代化 JavaScript 框架时，我们通常需要动态地更新页面视图以匹配 URL 路径中的路由而不进行任何页面重新加载。这就是我们需要路由监听的原因，以更新浏览器 URL 的时候同时不需要全量渲染页面。在本文中，我们会一起探讨如何实现 JavaScript 的路由监听。

二、使用JavaScript实现监听路由变化

路由的监听是实现单页面应用 (SPA) 的主要轴心之一。在 JavaScript 应用程序中，我们通常使用路由来渲染不同的视图组件。以下是实现路由监听的基本步骤：

首先，我们需要为路由器设置监听器，并在路由变化时调用相应的函数。
我们需要使用 window.history.pushState API 来推动新路由并更新 URL。
我们需要使用 JavaScript 监听 popstate 事件在 URL 中更新路由时调用相应的函数。

这里还要说明的是在 HTML5 历史 API 中，我们通常使用 history.pushState 和 history.replaceState 这两个方法来添加和修改访问历史记录条目。这些方法可以使用浏览器历史 API 的 pushState, replaceState 和 popstate 方法来实现。

以下是一些示例代码，以便更好地理解 JavaScript 监听路由的过程。

示例1：

class Router {
  constructor(routes) {
    this.routes = routes;
    this._loadInitialRoute();
  }
  loadRoute(...url) {
    const matchedRoute = this._matchUrlToRoute(url);
    const urlSearchParams = this._splitUrlIntoParams(url);
    const queryParams = this._getParamsFromSearch(urlSearchParams);
    const routeParams = this._getParamsFromRoute(matchedRoute, url);
    matchedRoute.func({ ...routeParams, ...queryParams });
  }
  _getParamsFromRoute(route, url) {
    return route.path
      .split('/')
      .reduce((routeParams, routePathSegment, i) => {
        if (routePathSegment === '') {
          return routeParams;
        }
        if (routePathSegment[0] === ':') {
          return { ...routeParams, [routePathSegment.slice(1)]: url[i] };
        }
        return routeParams;
      }, {});
  }
  _getParamsFromSearch(search) {
    let queryParams = {};
    for (let [key, value] of search.entries()) {
      queryParams[key] = value;
    }
    return queryParams;
  }
  _splitUrlIntoParams(url) {
    const [, search] = url.toString().split('?');
    const urlSearchParams = new URLSearchParams(search);
    return urlSearchParams;
  }
  _matchUrlToRoute(urlSegments) {
    const matchedRoute = this.routes.find(route => {
      const routePathSegments = route.path.split('/').slice(1);
      if (routePathSegments.length !== urlSegments.length) {
        return false;
      }
      return routePathSegments.every(
        (routePathSegment, i) =>
          routePathSegment === urlSegments[i] || routePathSegment[0] === ':',
      );
    });
    return matchedRoute;
  }
  _loadInitialRoute() {
    const fullPathName = window.location.pathname;
    const urlSegments = fullPathName.split('/').slice(1);
    this.loadRoute(...urlSegments);
  }
}

const pageView = ({ title, content }) => {
  document.title = title;
  document.body.innerHTML = content;
};

const routes = [
  {
    path: '/',
    func: () =>
      pageView({ 
        title: 'HomePage', 
        content: '<h1>Welcome Home</h1>' 
     }),
  },
  {
    path: '/posts/:id',
    func: ({ id }) =>
      pageView({
        title: `Post ${id}`,
        content: `Displaying post ${id}`,
      }),
  },
  {
    path: '/query',
    func: ({ author, subject }) =>
      pageView({
        title: 'Query',
        content: `
            <ul>
              <li><strong>Author:</strong> ${author}</li>
              <li><strong>Subject:</strong> ${subject}</li>
            </ul>
          `,
      }),
  },
];

const router = new Router(routes);

document.querySelectorAll('a').forEach(link => {
  link.addEventListener('click', evt => {
    evt.preventDefault();
    const url = evt.target.getAttribute('href');
    const urlSegments = url.split('/').slice(1);
    router.loadRoute(...urlSegments);
    window.history.pushState({}, '', url);
 });
});

window.addEventListener('popstate', () => router.loadRoute(...location.pathname.split('/').slice(1)));

在上述示例代码中，我们创建了一个 Router 类的实例，该类有 loadRoute() 方法，该方法会通过传递给它的 URL 来查找匹配的路由并执行其函数。我们还设置了 window.history.pushState 必要的参数来推动新路由并更新 URL。我们用 popstate 事件监听器来在 URL 中更新路由时调用 loadRoute()。

示例2：

function loadPage(view) {
  const script = document.createElement('script');
  script.src = view;
  document.getElementById('page-view').appendChild(script);
}

document
  .querySelectorAll('a')
  .forEach(link =>
    link.addEventListener('click', event => {
      event.preventDefault();
      loadPage(event.target.href);
      history.pushState({}, '', event.target.href);
    })
  );

window.addEventListener('popstate', () => {
  document.getElementById('page-view').innerHTML = '';
});

在此示例代码中，我们创建了一个 loadPage() 函数来加载选定视图的内容。在监听 click 事件的链接时，我们加载该链接的内容并在 URL 中推送新路由，使用户可以通过浏览器的前进和后退按钮导航。popstate 事件监听器一旦应用程序 URL 历史记录发生了变化，则会重新加载页面。