路由之间是怎么跳转的？有哪些方式？

通过 标签跳转

1. 使用 HTML 中的 标签实现跳转，适合简单的超链接跳转。
2. 适用场景：无复杂跳转逻辑的静态页面。

<a href="/new-page">Go to New Page</a>

使用 JavaScript 的 window.location

1. 通过 JavaScript 操作 window.location 对象，可以进行页面跳转。
2. 适用场景：动态控制跳转。

window.location.href = '/new-page';

单页应用（SPA）的前端路由

1. 在前端框架中，使用前端路由库（如 React Router、Vue Router、Angular Router）管理路由。
2. 适用场景：单页应用（SPA）中，根据路径或状态切换视图而无需刷新页面。

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

function App() {
    return (
        <Router>
            <nav>
                <Link to="/home">Home</Link>
                <Link to="/about">About</Link>
            </nav>
            <Switch>
                <Route path="/home" component={Home} />
                <Route path="/about" component={About} />
            </Switch>
        </Router>
    );
}

history.push 方法

1. 在浏览器环境下可以使用 history 对象的 push 方法进行无刷新跳转。
2. 适用场景：需要动态控制路由且希望保留历史记录。

window.history.pushState({}, '', '/new-page');

使用 location.replace 方法

1. location.replace 方法与 window.location.href 类似，但不会保存当前页面的历史记录。
2. 适用场景：敏感页面的跳转（如登录成功后不允许返回登录页）。

window.location.replace('/new-page');

重定向组件跳转

1. 前端框架中提供的重定向组件，用于条件性跳转。
2. 适用场景：用户认证、权限控制等条件跳转。

import { Redirect } from 'react-router-dom';

function App() {
    const isAuthenticated = false; // 模拟用户未登录
    return (
        <div>
            {isAuthenticated ? <Home /> : <Redirect to="/login" />}
        </div>
    );
}

动态导航

1. 使用框架提供的导航 API 进行程序化路由跳转。
2. 适用场景：Vue 等框架中动态跳转页面。

this.$router.push('/new-page');