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

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> 指令来实现声明式路由跳转。

  <a routerLink="/about">Go to About</a>
  

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

  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']);
    }
  }
  

• 路由重定向 路由重定向可以通过在路由配置中进行设置来实现。例如：

  const routes: Routes = [ { path: '', redirectTo: '/home', pathMatch: 'full' } ];

4. 原生 HTML 路由跳转

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

• 使用 <a> 标签跳转 使用标准的 HTML <a> 标签来进行跳转，这种方式会触发浏览器的页面刷新。

  <a href="/about">Go to About</a>

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

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

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

• history.pushState() 和 history.replaceState()

  这些方法允许你修改浏览器的历史记录而不引起页面重载，适用于使用单页应用（SPA）框架或自己管理路由的场景。

  history.pushState({ page: 'about' }, '', '/about');
  pushState()：添加历史记录
  replaceState()：替换当前历史记录

总结

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

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

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