当前位置：首页 > article >正文

React18路由和Vue3路由进行对比

article 2025/1/7 4:18:34

在这里插入图片描述

本文将深入比较 React 18 和 Vue 3 路由的不同之处，帮助你更好地理解如何在这两个框架中进行路由管理。希望能对于从 Vue 3 迁移到 React 的开发者，理解这些差异，帮助你更高效地切换框架和构建应用。

1. 路由配置

React 18 的路由配置

React 18 使用 react-router-dom 来处理路由。在 React 中，我们使用 createBrowserRouter 或 createHashRouter 来创建路由实例。路由实例通常作为数组传递给 RouterProvider 进行渲染。配置如下：

import { createBrowserRouter } from 'react-router-dom';
import Layout from '../pages/Layout';
import Login from '../pages/Login';
import NotFound from '../pages/NotFound';

const router = createBrowserRouter([
  {
    path: '/',
    element: <Layout />,
    children: [
      { path: 'login', element: <Login /> },
      { path: '*', element: <NotFound /> }
    ]
  }
]);

export default router;

Vue 3 的路由配置

Vue 3 使用 Vue Router 来管理路由，配置上更加简洁。路由实例是通过 createRouter 和 createWebHistory（或 createWebHashHistory）来创建的。Vue 3 也使用类似的路由对象数组配置方式：

import { createRouter, createWebHistory } from 'vue-router';
import Layout from '../pages/Layout.vue';
import Login from '../pages/Login.vue';
import NotFound from '../pages/NotFound.vue';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      component: Layout,
      children: [
        { path: 'login', component: Login },
        { path: '/:pathMatch(.*)*', component: NotFound }
      ]
    }
  ]
});

export default router;

差异

路由对象的配置方式：在 React 中，你需要明确地使用 createBrowserRouter 或 createHashRouter 创建路由实例，而 Vue 则通过 createRouter 来创建一个路由实例并指定历史模式。
路径匹配：Vue 3 路由使用 pathMatch(.*) 来匹配所有未匹配的路径（即 404 页面）。React 路由则通过配置 path: '*' 来实现相同的效果。

2. 路由导航

React 18 的导航

React 18 使用 <Link> 组件进行声明式导航，同时提供 useNavigate hook 来实现编程式导航。你可以通过 useNavigate 来控制路由跳转：

import { Link, useNavigate } from 'react-router-dom';

const Login = () => {
  const navigate = useNavigate();
  return (
    <div>
      <Link to="/login">登录</Link>
      <button onClick={() => navigate('/login')}>跳转到登录页</button>
    </div>
  );
};

Vue 3 的导航

在 Vue 中，你可以使用 <router-link> 组件来实现声明式导航。对于编程式导航，Vue 提供了 this.$router.push 方法：

<template>
  <div>
    <router-link to="/login">登录</router-link>
    <button @click="goToLogin">跳转到登录页</button>
  </div>
</template>

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

差异

声明式导航：React 使用 <Link>，而 Vue 使用 <router-link>。这两个组件的功能相似，都是用于在组件中声明路由跳转。
编程式导航：React 使用 useNavigate() hook 来进行编程式导航，而 Vue 则使用 this.$router.push()。这两者功能类似，都是用来通过编程方式跳转到其他路由，但 React 的方法是 hook，Vue 则是基于实例的。

3. 路由参数

React 18 路由参数

React 通过 useParams 和 useSearchParams 钩子来获取路径参数和查询参数：

import { useParams, useSearchParams } from 'react-router-dom';

const Article = () => {
  const { id, name } = useParams(); // 获取路径参数
  const [searchParams] = useSearchParams(); // 获取查询参数
  return (
    <div>
      <h1>文章 ID: {id}, 文章名称: {name}</h1>
      <h2>查询参数 - ID: {searchParams.get('id')}, Name: {searchParams.get('name')}</h2>
    </div>
  );
};

Vue 3 路由参数

Vue 通过 $route.params 和 $route.query 来获取路径参数和查询参数：

<template>
  <div>
    <h1>文章 ID: {{ $route.params.id }}, 文章名称: {{ $route.params.name }}</h1>
    <h2>查询参数 - ID: {{ $route.query.id }}, Name: {{ $route.query.name }}</h2>
  </div>
</template>

差异

路径参数：React 使用 useParams hook 获取路径参数，而 Vue 使用 $route.params。两者本质上是一样的，但 React 的实现是基于 hook 的方式，Vue 则是基于实例的方式。
查询参数：React 使用 useSearchParams 获取查询参数，Vue 则通过 $route.query 来访问查询参数。这两种方法的语法和实现方式略有不同。

4. 嵌套路由

React 18 的嵌套路由

React 的嵌套路由通过 children 属性实现。你可以在父路由中指定子路由并渲染：

// createBrowerRouter 其实是history路由模式
const router = createBrowserRouter([
  {
    path: '/',
    element: <Layout />,
    children: [
      { path: 'board', element: <Board /> },
      { path: 'about', element: <About /> }
    ]
  }
]);

Vue 3 的嵌套路由

Vue 也支持嵌套路由。子路由被定义在父路由的 children 数组中：

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      component: Layout,
      children: [
        { path: 'board', component: Board },
        { path: 'about', component: About }
      ]
    }
  ]
});

差异

嵌套路由配置：React 和 Vue 在嵌套路由的配置上非常相似，都是通过父路由的 children 数组来配置子路由。唯一的差异是 React 的路由配置是通过 createBrowserRouter 来创建的，而 Vue 使用 createRouter。

总结

虽然 React 18 和 Vue 3 的路由系统都提供了强大的功能，但两者在实现上有一些细节上的差异，尤其是在路由配置、导航方式、路由参数的获取以及嵌套路由的实现上。主要差异总结如下：

路由实例的创建方式：React 使用 createBrowserRouter 或 createHashRouter，Vue 使用 createRouter。
路由导航：React 使用 useNavigate hook，而 Vue 使用 this.$router.push。
参数获取：React 使用 useParams 和 useSearchParams，Vue 使用 $route.params 和 $route.query。
嵌套路由：两者的配置方式相似，均通过 children 数组进行配置。