前端路由分类及原理

前端

2023-12-22 05:00:25

前端路由：单页面应用与服务端渲染的较量

想象一下，你正在浏览一个网站，点击一个链接，但整个页面却没有刷新。取而代之的是，你看到内容发生了变化，仿佛一个全新的页面已在幕后加载。这就是前端路由的力量。

前端路由是什么？

前端路由是一种管理网页内容切换的技术，无需刷新整个页面，从而实现类似于单页面应用（SPA）的体验。这不仅提高了速度和响应速度，还能改善用户体验。

单页面应用（SPA）

SPA 在客户端（即浏览器）渲染所有内容。当用户在 SPA 中导航时，只会更新相关的内容。这种方式速度快且响应迅速。

优点：

快速加载
响应迅速
流畅的导航体验

缺点：

SEO 不友好
首次加载时间较慢
浏览器兼容性问题

服务端渲染（SSR）

SSR 在服务器端渲染所有内容，然后将渲染好的 HTML 发送给客户端。这使得搜索引擎可以抓取和索引内容，并加快首次加载时间。

优点：

SEO 友好
首次加载时间快
浏览器兼容性好

缺点：

服务器负载较高
动态内容难以实现

虚拟 DOM

虚拟 DOM 是前端路由中至关重要的技术。它是一个内存中的数据结构，表示当前页面的状态。当路由发生变化时，虚拟 DOM 会更新，然后将更新后的虚拟 DOM 渲染成 HTML。这使得前端路由非常高效，因为只需要更新发生变化的部分，而不需要重新渲染整个页面。

路由器

路由器负责管理路由表和路由切换。路由表将路由路径映射到路由组件。当用户在 SPA 中导航时，路由器会从路由表中找到对应的路由组件，然后将其渲染到页面中。

路由参数

路由参数是传递给路由组件的数据。它们可以从 URL 中提取或通过其他方式传递。路由参数用于在路由组件中渲染动态内容。

路由守卫

路由守卫用于控制路由导航。它们可以检查用户是否具有访问权限或某个路由是否需要加载数据。如果路由守卫检查失败，则路由导航将被阻止。

路由历史记录

路由历史记录存储了用户在 SPA 中访问过的 URL，允许他们轻松返回之前访问过的页面。

路由模式

路由模式决定了前端路由在浏览器中的工作方式。哈希模式使用 URL 中的哈希部分，而 history 模式使用浏览器的历史记录 API。

路由组件

路由组件负责渲染页面内容。它们可以是函数组件或类组件，并可以从路由器中接收路由参数。

代码示例

// React SPA 示例
import { useState } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

function App() {
  const [count, setCount] = useState(0);

  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </Router>
  );
}

function Home() {
  return <h1>Home Page</h1>;
}

function About() {
  return <h1>About Page</h1>;
}

function Contact() {
  return <h1>Contact Page</h1>;
}

export default App;