JS路由实现方式全解析

“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《JS实现路由的几种方式解析》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

JS实现路由的关键是监听URL变化并动态更新页面内容，主要有hash和History API两种方式。1. Hash路由通过监听window.onhashchange事件获取location.hash值，根据不同的hash值渲染对应页面内容，兼容性好但URL中带有#，影响美观。2. History API路由利用history.pushState和replaceState修改URL，结合onpopstate监听前进后退操作，URL更简洁，但需服务器配置支持，防止刷新时404。两种方式均可通过解析URL参数实现传参，如hash中分割字符串或使用URLSearchParams解析查询参数。为避免刷新导致路由失效，服务器需将所有路由重定向到index.html。此外，可使用React Router等第三方库简化开发，支持嵌套路由、路由守卫等高级功能，提升开发效率。

JS实现路由，本质上就是根据不同的URL显示不同的内容。关键在于监听URL变化并更新页面。

解决方案

JS实现路由主要有两种方式：一种是利用hash（#）的变化，另一种是利用HTML5的history API。

Hash路由

Hash路由的原理是监听window.onhashchange事件。当URL中的#后面的内容发生变化时，会触发这个事件。我们可以通过读取location.hash来获取当前hash值，然后根据这个值来更新页面内容。

window.onhashchange = function() {
  const hash = location.hash.slice(1); // 去掉#号
  updatePage(hash);
};

function updatePage(hash) {
  // 根据hash值更新页面内容
  const contentDiv = document.getElementById('content');
  switch (hash) {
    case 'home':
      contentDiv.innerHTML = '<h1>Home Page</h1><p>Welcome to the home page.</p>';
      break;
    case 'about':
      contentDiv.innerHTML = '<h1>About Page</h1><p>This is the about page.</p>';
      break;
    case 'contact':
      contentDiv.innerHTML = '<h1>Contact Page</h1><p>Contact us here.</p>';
      break;
    default:
      contentDiv.innerHTML = '<h1>404 Not Found</h1><p>Page not found.</p>';
  }
}

// 页面加载时初始化
if (location.hash) {
  updatePage(location.hash.slice(1));
} else {
  location.hash = 'home'; // 默认显示home
}

Hash路由的优点是兼容性好，即使在老版本的浏览器上也能正常工作。缺点是URL中会有一个#号，不太美观。

History API路由

History API路由使用history.pushState和history.replaceState来改变URL，而不会重新加载页面。同时，我们可以监听window.onpopstate事件，当用户点击浏览器的前进/后退按钮时，会触发这个事件。

function navigateTo(url) {
  history.pushState(null, null, url);
  updatePage(url);
}

window.onpopstate = function() {
  updatePage(location.pathname);
};

function updatePage(url) {
  // 根据url更新页面内容
  const contentDiv = document.getElementById('content');
  switch (url) {
    case '/':
      contentDiv.innerHTML = '<h1>Home Page</h1><p>Welcome to the home page.</p>';
      break;
    case '/about':
      contentDiv.innerHTML = '<h1>About Page</h1><p>This is the about page.</p>';
      break;
    case '/contact':
      contentDiv.innerHTML = '<h1>Contact Page</h1><p>Contact us here.</p>';
      break;
    default:
      contentDiv.innerHTML = '<h1>404 Not Found</h1><p>Page not found.</p>';
  }
}

// 页面加载时初始化
updatePage(location.pathname);

// 绑定链接点击事件 (假设有 <a href="/about">About</a> 这样的链接)
document.addEventListener('click', function(event) {
  if (event.target.tagName === 'A') {
    event.preventDefault(); // 阻止默认的链接跳转
    const url = event.target.getAttribute('href');
    navigateTo(url);
  }
});

History API路由的优点是URL更美观，没有#号。缺点是需要服务器端配置，确保在刷新页面时能正确处理路由。另外，兼容性方面，一些老版本的浏览器可能不支持History API。

如何处理404错误？

在Hash路由中，如果location.hash的值不在预定义的路由表中，可以直接显示一个404页面。例如，在上面的Hash路由示例中，default分支就处理了这种情况。

在使用History API路由时，服务器端也需要配置。当服务器收到一个不在预定义的路由表中的请求时，应该返回index.html页面，然后由前端JS路由来处理404错误。这是因为History API改变的是客户端的URL，服务器端并不知道这些URL。

如何实现路由的参数传递？

在Hash路由中，参数通常会附加在#后面的URL中，例如#product/123。我们可以通过解析location.hash来获取参数。

const hash = location.hash.slice(1);
const parts = hash.split('/');
const route = parts[0]; // "product"
const id = parts[1];    // "123"

在使用History API路由时，参数可以直接附加在URL中，例如/product/123?color=red。我们可以使用URLSearchParams来解析URL中的查询参数。

const urlParams = new URLSearchParams(location.search);
const color = urlParams.get('color'); // "red"

如何避免页面刷新时路由失效？

在使用History API路由时，如果直接刷新页面，服务器可能会返回404错误。为了避免这种情况，需要在服务器端配置，将所有未知的路由都重定向到index.html。这样，前端JS路由就可以接管路由控制。例如，在Node.js中使用Express框架，可以这样配置：

const express = require('express');
const path = require('path');
const app = express();

app.use(express.static('public')); // 假设静态文件在public目录下

app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, 'public', 'index.html'));
});

app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

这段代码会将所有GET请求都重定向到index.html，然后由前端JS路由来处理。

如何使用第三方库简化路由实现？

有很多优秀的第三方库可以简化JS路由的实现，例如React Router、Vue Router、Angular Router等。这些库提供了更高级的路由功能，例如嵌套路由、路由守卫、动态路由等。使用这些库可以大大提高开发效率。例如，使用React Router：

import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/users">Users</Link>
            </li>
          </ul>
        </nav>

        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
        <Route path="/users" component={Users} />
      </div>
    </Router>
  );
}

这段代码使用BrowserRouter来启用History API路由，并使用Route组件来定义路由规则。Link组件用于创建链接，点击链接时会自动更新URL并渲染对应的组件。

今天关于《JS路由实现方式全解析》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于第三方库,HistoryAPI,JS路由,Hash路由,URL变化的内容请关注golang学习网公众号！