Laravel路由：api.php与web.php的区别详解

Hey there! Great question—this is a super common point of confusion when you're getting started with Laravel, especially if you're building a mix of traditional web apps and APIs (like with Vue.js, which you mentioned). Let me break down the key differences between routes/web.php and routes/api.php for you:

1. Middleware Stack #

• web.php uses the web middleware group by default, which includes tools for stateful web apps:
  • Session handling (StartSession) to maintain user login state across requests
  • CSRF protection (VerifyCsrfToken) to block cross-site request forgery attacks
  • Cookie encryption (EncryptCookies) for secure user cookie storage
  • Helpers like ShareErrorsFromSession to pass validation errors to Blade views
• api.php uses the leaner api middleware group, built for stateless APIs:
  • throttle:api to rate-limit requests and prevent abuse
  • BindRequests for automatic route model binding
  • No session or CSRF protection—APIs rely on tokens (like Laravel Sanctum or JWT) instead of cookies/sessions for auth

2. Route Prefixing #

• Routes in web.php live at your app's root domain, e.g., https://your-app.com/dashboard
• All api.php routes automatically get an /api prefix (configurable in RouteServiceProvider.php), so a route like Route::get('/users', ...) becomes https://your-app.com/api/users

3. Stateful vs. Stateless Behavior #

• web.php routes are stateful: they use sessions and cookies to remember authenticated users. Perfect for traditional server-rendered Blade pages where you log in once and stay logged in across navigation.
• api.php routes are stateless: every request needs to include auth credentials (like a token in the Authorization header) because there's no persistent session. This is ideal for your Vue.js frontend, which will make AJAX calls and manage auth tokens client-side.

4. Default Controller Namespaces #

• web.php loads controllers from the App\Http\Controllers namespace by default (so you can write DashboardController instead of the full namespace path)
• api.php defaults to the App\Http\Controllers\Api namespace—you can adjust this in RouteServiceProvider if you prefer a different folder structure.

5. Real-World Use Cases #

• Use web.php for:
  • Server-rendered pages (login screens, Blade-based admin dashboards)
  • Form submission routes that require session-based auth
• Use api.php for:
  • All endpoints your Vue.js app calls (fetching data, creating/updating records)
  • Third-party integrations that need programmatic access to your app's data

Quick Example #

For a Vue component fetching product data:

// routes/api.php
Route::get('/products', [ProductController::class, 'index'])->middleware('auth:sanctum');

Your Vue app would hit GET /api/products with a Sanctum token in the request headers.

For a server-rendered admin dashboard:

// routes/web.php
Route::get('/admin/dashboard', [AdminController::class, 'dashboard'])->middleware('auth');

This uses session-based auth to check if the user is logged in before loading the page.

Hope that clears things up! Let me know if you have follow-up questions about setting up auth for your Vue app or structuring your routes further.

内容的提问来源于stack exchange，提问作者Sam