路由对决：Vue Router vs React Router，谁是你的菜？

大家好，我是小杨。今天我们来聊聊前端开发中两个重要的路由库------Vue Router和React Router。它们就像是两个不同风格的导游，都能带你游览单页面应用的世界，但带队方式却大不相同。

初识两位"导游"

还记得我第一次接触前端路由时的困惑吗？明明都是做路由，为什么Vue和React的用法差这么多？经过多个项目的实践，我终于理解了它们各自的设计哲学。

Vue Router：贴心的"全包式导游"

Vue Router更像是那种把一切都安排好的贴心导游：

javascript 复制代码

// Vue Router的配置方式
import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: HomePage,
    meta: { requiresAuth: true }
  },
  {
    path: '/about',
    name: 'About', 
    component: AboutPage,
    children: [
      {
        path: 'team',
        component: TeamSection
      }
    ]
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

// 在main.js中注册
app.use(router);

React Router：灵活的"自助式导游"

React Router则像是给你地图和工具，让你自己探索的导游：

javascript 复制代码

// React Router的配置方式
import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />}>
          <Route path="team" element={<TeamSection />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

核心差异大揭秘

1. 配置方式：集中式 vs 声明式

Vue Router喜欢集中管理：

javascript 复制代码

// 所有路由在一个地方定义
const router = createRouter({
  routes: [
    { path: '/user/:id', component: UserDetail },
    { path: '/settings', component: Settings }
  ]
});

// 在组件中使用
<template>
  <router-view />
</template>

React Router偏爱组件化声明：

javascript 复制代码

// 路由也是组件，可以分散在不同文件
function UserRoutes() {
  return (
    <Routes>
      <Route path=":id" element={<UserDetail />} />
      <Route path="settings" element={<Settings />} />
    </Routes>
  );
}

function App() {
  return (
    <BrowserRouter>
      <UserRoutes />
    </BrowserRouter>
  );
}

2. 导航方式：命令式 vs 声明式

Vue Router提供多种导航选择：

javascript 复制代码

<template>
  <!-- 声明式导航 -->
  <router-link to="/home">首页</router-link>
  
  <!-- 编程式导航 -->
  <button @click="goToAbout">关于我们</button>
</template>

<script setup>
import { useRouter } from 'vue-router';

const router = useRouter();

const goToAbout = () => {
  router.push('/about');
  
  // 或者带参数
  router.push({
    name: 'UserProfile',
    params: { userId: 123 }
  });
};
</script>

React Router的导航同样灵活：

javascript 复制代码

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

function Navigation() {
  const navigate = useNavigate();
  
  return (
    <div>
      {/* 声明式导航 */}
      <Link to="/home">首页</Link>
      
      {/* 编程式导航 */}
      <button onClick={() => navigate('/about')}>
        关于我们
      </button>
      
      <button onClick={() => navigate('/user/123')}>
        用户详情
      </button>
    </div>
  );
}

3. 路由参数获取：各有绝活

Vue Router的参数获取：

javascript 复制代码

<template>
  <div>
    <h1>用户资料: {{ userId }}</h1>
    <p>查询参数: {{ searchQuery }}</p>
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router';

const route = useRoute();
const userId = computed(() => route.params.userId);
const searchQuery = computed(() => route.query.search);
</script>

React Router的参数获取：

javascript 复制代码

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

function UserDetail() {
  const { userId } = useParams();
  const [searchParams] = useSearchParams();
  const searchQuery = searchParams.get('search');
  
  return (
    <div>
      <h1>用户资料: {userId}</h1>
      <p>查询参数: {searchQuery}</p>
    </div>
  );
}

4. 路由守卫：权限控制的两种思路

Vue Router的全局守卫：

javascript 复制代码

// 在路由配置中设置元信息
const routes = [
  {
    path: '/admin',
    component: AdminPanel,
    meta: { requiresAuth: true, requiresAdmin: true }
  }
];

// 全局前置守卫
router.beforeEach((to, from) => {
  if (to.meta.requiresAuth && !isLoggedIn()) {
    return '/login';
  }
  
  if (to.meta.requiresAdmin && !isAdmin()) {
    return '/unauthorized';
  }
});

React Router的组件级控制：

javascript 复制代码

// 创建保护路由组件
function ProtectedRoute({ children }) {
  const isAuthenticated = useAuth();
  
  if (!isAuthenticated) {
    return <Navigate to="/login" replace />;
  }
  
  return children;
}

// 使用方式
<Route
  path="/admin"
  element={
    <ProtectedRoute>
      <AdminPanel />
    </ProtectedRoute>
  }
/>

高级特性对比

懒加载的实现

Vue Router的懒加载：

javascript 复制代码

const routes = [
  {
    path: '/dashboard',
    component: () => import('./views/Dashboard.vue')
  }
];

React Router的懒加载：

javascript 复制代码

import { lazy, Suspense } from 'react';

const Dashboard = lazy(() => import('./views/Dashboard'));

<Route
  path="/dashboard"
  element={
    <Suspense fallback={<div>加载中...</div>}>
      <Dashboard />
    </Suspense>
  }
/>

嵌套路由的差异

Vue Router的嵌套路由：

javascript 复制代码

const routes = [
  {
    path: '/user/:id',
    component: UserLayout,
    children: [
      {
        path: 'profile',
        component: UserProfile
      },
      {
        path: 'settings', 
        component: UserSettings
      }
    ]
  }
];

// 在UserLayout中使用
<template>
  <div>
    <h1>用户布局</h1>
    <router-view />  <!-- 子路由在这里渲染 -->
  </div>
</template>

React Router的嵌套路由：

javascript 复制代码

function UserLayout() {
  return (
    <div>
      <h1>用户布局</h1>
      <Outlet />  {/* 子路由在这里渲染 */}
    </div>
  );
}

<Route path="/user/:id" element={<UserLayout />}>
  <Route path="profile" element={<UserProfile />} />
  <Route path="settings" element={<UserSettings />} />
</Route>

我的实战经验分享

什么时候选择Vue Router？

在我经历的项目中，Vue Router在以下场景表现很棒：

javascript 复制代码

// 企业级后台管理系统
const adminRoutes = [
  {
    path: '/admin',
    component: AdminLayout,
    meta: { requiresAuth: true },
    children: [
      // 清晰的路由层级，便于权限管理
    ]
  }
];

// 全局的路由守卫统一处理权限
router.beforeEach((to, from) => {
  // 统一的登录检查、权限验证
});

什么时候选择React Router？

React Router在这些情况下更得我心：

javascript 复制代码

// 需要高度 自定义路由逻辑的项目
function DynamicRoutes() {
  const userRole = useUserRole();
  
  // 根据用户角色动态生成路由
  const routes = useMemo(() => 
    generateRoutesBasedOnRole(userRole), 
    [userRole]
  );
  
  return (
    <Routes>
      {routes.map(route => (
        <Route key={route.path} {...route} />
      ))}
    </Routes>
  );
}

性能与生态对比

包大小

Vue Router：~18KB
React Router：~16KB

学习曲线

Vue Router：相对平缓，概念较少
React Router：需要理解React组件思维

生态系统

两者都有丰富的插件和中间件支持，满足各种复杂需求。

总结：没有最好，只有最合适

经过多个项目的实践，我的体会是：

选择Vue Router如果：

项目使用Vue生态
需要清晰的集中式配置
喜欢全局的路由守卫机制
团队对Vue更熟悉

选择React Router如果：

项目基于React技术栈
需要高度自定义路由逻辑
喜欢组件化的声明方式
需要更好的TypeScript支持

说到底，两个路由库都很优秀，选择哪个更多取决于项目需求和技术栈偏好。重要的是理解它们的设计哲学，这样才能发挥出最大的威力。

你在项目中使用哪个路由库？有什么有趣的经验分享吗？欢迎在评论区讨论！

⭐ 写在最后

请大家不吝赐教,在下方评论或者私信我,十分感谢🙏🙏🙏.

✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式

✅ 认为我部分代码过于老旧,可以提供新的API或最新语法

✅ 对于文章中部分内容不理解

✅ 解答我文章中一些疑问

✅ 认为某些交互,功能需要优化,发现BUG

✅ 想要添加新功能,对于整体的设计,外观有更好的建议

✅ 一起探讨技术加qq交流群：906392632

最后感谢各位的耐心观看，既然都到这了，点个 👍赞再走吧！