Vue Router VS React Router v6+对比学习

前言

Vue Router（Vue 3） 与 React Router v6+（react-router-dom） 的对比学习手册，涵盖核心概念、用法差异与对应代码示例

---

✅ 1. 路由表配置（routes）

Vue Router

// router/index.ts
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
]
const router = createRouter({
  history: createWebHistory(),
  routes,
})

React Router

// App.tsx or Router.tsx
import { createBrowserRouter, RouterProvider } from 'react-router-dom'

const router = createBrowserRouter([
  { path: '/', element: <Home /> },
  { path: '/about', element: <About /> },
])

<RouterProvider router={router} />

React 是 JSX 组件驱动，而 Vue 使用对象结构驱动。

---

✅ 2. 路由占位和嵌套路由

Vue Router

React Router

<Outlet />  // 占位符

• 在父路由的 element 中渲染 来嵌套子路由。

{
  path: '/dashboard',
  element: <DashboardLayout />,
  children: [
    { path: 'overview', element: <Overview /> },
    { path: 'settings', element: <Settings /> }
  ]
}

---

✅ 3. 路由跳转

Vue Router

this.$router.push('/about')         // Options API
router.push({ name: 'about' })      // Composition API

React Router

const navigate = useNavigate()
navigate('/about')

---

✅ 4. 获取参数和路由信息

Vue Router

const route = useRoute()
route.params.id

React Router

import { useParams, useLocation } from 'react-router-dom'

const { id } = useParams()
const location = useLocation()

---

✅ 5. 编程式路由导航守卫

Vue Router（beforeEach 全局守卫）

router.beforeEach((to, from, next) => {
  if (!isLogin) next('/login')
  else next()
})

React Router（使用 useEffect + useNavigate）

useEffect(() => {
  if (!isLogin) navigate('/login')
}, [])

或者写一个 路由守卫组件（高阶组件）：

function PrivateRoute({ children }) {
  return isLogin ? children : <Navigate to="/login" />
}

---

✅ 6. 动态路由和懒加载

Vue Router

{ path: '/user/:id', component: () => import('@/views/User.vue') }

React Router

{
  path: '/user/:id',
  element: <Suspense fallback={<Loading />}><User /></Suspense>
}

const User = lazy(() => import('./views/User'))

---

✅ 7. 嵌套路由目录结构建议（通用）

src/
├── pages/
│   ├── Layout.tsx
│   ├── Home.tsx
│   ├── Dashboard/
│   │   ├── index.tsx
│   │   ├── Settings.tsx

---

✅ 总结对比表

功能	Vue Router	React Router DOM
路由定义方式	对象数组	JSX/JS 对象数组
路由组件
编程导航	router.push('/home')	useNavigate()
获取参数	useRoute().params	useParams()
守卫机制	beforeEach/beforeRouteEnter	手动封装组件 / useEffect
动态导入	component: () => import(...)	React.lazy() +
命名路由	✅（支持 name）	❌ 不支持
多级嵌套	✅	✅

---