本文将深入比较 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 使用
useParamshook 获取路径参数，而 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 使用
useNavigatehook，而 Vue 使用this.$router.push。 - 参数获取：React 使用
useParams和useSearchParams，Vue 使用$route.params和$route.query。 - 嵌套路由：两者的配置方式相似，均通过
children数组进行配置。
这样我们可以看出，React 18和Vue 3 还是有很多相似处的，只是语法用法上不同。