Vue Router VS React Router v6+对比学习

文章目录

• • @[TOC](文章目录)
• 前言
• • ✅ 1. 路由表配置（routes）
  • • 🔹 Vue Router
    • 🔸 React Router
  • ✅ 2. 路由占位和嵌套路由
  • • 🔹 Vue Router
    • 🔸 React Router
  • ✅ 3. 路由跳转
  • • 🔹 Vue Router
    • 🔸 React Router
  • ✅ 4. 获取参数和路由信息
  • • 🔹 Vue Router
    • 🔸 React Router
  • ✅ 5. 编程式路由导航守卫
  • • 🔹 Vue Router（beforeEach 全局守卫）
    • 🔸 React Router（使用 `useEffect` + `useNavigate`）
  • ✅ 6. 动态路由和懒加载
  • • 🔹 Vue Router
    • 🔸 React Router
  • ✅ 7. 嵌套路由目录结构建议（通用）
  • ✅ 总结对比表

前言

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

<router-view />  <!-- 占位组件 -->

🔸 React Router

<Outlet />  // 占位符

• 在父路由的 element 中渲染 <Outlet /> 来嵌套子路由。

{
  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

✅ 总结对比表