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

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 地址来切换视图

相关推荐
吞掉星星的鲸鱼23 分钟前
使用高德api实现天气查询
前端·javascript·css
lilye6626 分钟前
程序化广告行业(55/89):DMP与DSP对接及数据统计原理剖析
java·服务器·前端
....49227 分钟前
Vue3 + Element Plus + AntV X6 实现拖拽树组件
javascript·vue.js·elementui·antvx6
zhougl9962 小时前
html处理Base文件流
linux·前端·html
花花鱼2 小时前
node-modules-inspector 可视化node_modules
前端·javascript·vue.js
HBR666_2 小时前
marked库(高效将 Markdown 转换为 HTML 的利器)
前端·markdown
careybobo4 小时前
海康摄像头通过Web插件进行预览播放和控制
前端
TDengine (老段)4 小时前
TDengine 中的关联查询
大数据·javascript·网络·物联网·时序数据库·tdengine·iotdb
杉之5 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端5 小时前
字段聚类,到底有什么用?——从系统混乱到结构认知的第一步
前端