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

1. React 路由跳转方式（React Router）

在 React 中，路由跳转通常使用 React Router 来管理。React Router 提供了不同的跳转方式。

<Link> 组件跳转 使用 <Link> 组件来进行路由跳转，它会渲染为一个 HTML <a> 标签，不会引起页面的刷新，而是通过路由机制实现视图切换。
复制代码
```
import { Link } from 'react-router-dom';

const MyComponent = () => {
  return (
    <div>
      <Link to="/about">Go to About</Link>
    </div>
  );
}
```

history.push() 跳转 使用 history.push() 来实现程序化路由跳转，通常在函数组件中结合 useHistory 钩子来使用。

复制代码

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

const MyComponent = () => {
  const history = useHistory();

  const navigate = () => {
    history.push('/about');
  }

  return (
    <div>
      <button onClick={navigate}>Go to About</button>
    </div>
  );
}

<Redirect /> 跳转 <Redirect /> 组件用来在渲染时自动进行路由跳转，常用于条件判断或权限控制等场景。

复制代码

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

const MyComponent = () => {
  const shouldRedirect = true;

  return shouldRedirect ? <Redirect to="/about" /> : <div>Home</div>;
}

2. Vue 路由跳转方式（Vue Router）

在 Vue 中，路由跳转通常使用 Vue Router。Vue Router 提供了几种跳转方式：

<router-link> 组件跳转 与 React 中的 <Link> 类似，Vue 使用 <router-link> 来实现声明式路由跳转。
复制代码
```
<template>
  <router-link to="/about">Go to About</router-link>
</template>
```

this.$router.push() 跳转 使用 this.$router.push() 实现程序化路由跳转，常见于方法或事件处理函数中。

复制代码

<template>
  <button @click="goToAbout">Go to About</button>
</template>

<script>
export default {
  methods: {
    goToAbout() {
      this.$router.push('/about');
    }
  }
}
</script>

this.$router.replace() 跳转 与 push 类似，但 replace 不会留下历史记录，所以无法使用浏览器的后退按钮返回到上一个页面。
复制代码
```
this.$router.replace('/about');
```
编程式重定向（this.$router.replace()） 根据某些条件进行页面跳转。
复制代码
```
if (userNotLoggedIn) {
  this.$router.replace('/login');
}
```

3. Angular 路由跳转（Angular Router）

在 Angular 中，路由跳转通常通过 Angular Router 来完成，主要有以下几种方式：

<routerLink> 指令跳转 与 React 和 Vue 类似，Angular 使用 <routerLink> 指令来实现声明式路由跳转。
html 复制代码
```
<a routerLink="/about">Go to About</a>
```

this.router.navigate() 跳转 Angular 提供了编程式路由跳转的方法 navigate()，常常在组件的代码中使用。

html 复制代码

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html'
})
export class HomeComponent {
  constructor(private router: Router) {}

  goToAbout() {
    this.router.navigate(['/about']);
  }
}

路由重定向 路由重定向可以通过在路由配置中进行设置来实现。例如：
javascript 复制代码
```
const routes: Routes = [ { path: '', redirectTo: '/home', pathMatch: 'full' } ];
```

4. 原生 HTML 路由跳转

对于一些不使用框架的应用，或者需要跳转到其他页面的场景，可以使用原生 HTML 的方式进行路由跳转：

使用 <a> 标签跳转 使用标准的 HTML <a> 标签来进行跳转，这种方式会触发浏览器的页面刷新。
html 复制代码
```
<a href="/about">Go to About</a>
```

window.location 跳转 使用 JavaScript 的 window.location 对象来进行页面跳转。

java 复制代码

window.location.href = '/about'; // 或者 window.location.replace('/about');
window.location.href 会将新页面加入浏览器历史记录，而 window.location.replace() 不会，后者类似于 pushState。

5. 其他常见的路由跳转方式

history.pushState() 和 history.replaceState()

这些方法允许你修改浏览器的历史记录而不引起页面重载，适用于使用单页应用（SPA）框架或自己管理路由的场景。
java 复制代码
```
history.pushState({ page: 'about' }, '', '/about');
pushState()：添加历史记录
replaceState()：替换当前历史记录
```

总结

路由跳转的方式主要分为声明式跳转和程序化跳转：

声明式跳转 ：通过 <Link>、<router-link> 或 <routerLink> 等标签实现，通常用于静态页面中的路由跳转。
程序化跳转 ：通过 history.push()、this.$router.push()、router.navigate() 等方法实现，通常用于事件处理、权限判断等动态场景。

不同框架和技术栈提供了不同的路由机制，但基本原理相同，都是通过修改浏览器的 URL 地址来切换视图