MVC 5 Pretty URL问题：自定义路由跳转后地址栏URL显示异常求助

Hey there! Let's tackle that URL mismatch issue you're facing. It sounds like you've set up the clean, user-friendly URL structure you want (http://app.fragtopgaver.dk/SuperTransport), but the browser is still showing the raw query string version after loading the page. Here are the most common fixes to get this sorted:

1. Check Server-Side URL Rewrite Rules (No Redirects!) #

The biggest culprit here is usually a server configuration that's doing an external redirect instead of an internal rewrite. Redirects force the browser to update the address bar, while rewrites let the server handle the request behind the scenes without changing what's displayed.

For Apache (using .htaccess): #

Make sure your rewrite rules don't include the R (redirect) flag. Use something like this:

RewriteEngine On
# Skip existing files/directories so static assets still work
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
# Internally forward the pretty URL to your getindex endpoint
RewriteRule ^([A-Za-z0-9-]+)$ getindex/?slug=$1 [L,QSA,NC]

• [L]: Stop processing further rules
• [QSA]: Preserve any extra query parameters
• [NC]: Make the match case-insensitive (so SuperTransport and supertransport both work)

For Nginx: #

Use try_files to internally route the request without redirecting:

location / {
    try_files $uri $uri/ /getindex/?slug=$uri;
}

Avoid using rewrite ... redirect or return 301 here—those will trigger an address bar update.

2. Ensure Frontend Routing Uses History Mode (If It's an SPA) #

If you're using a frontend framework like Vue, React, or Angular with client-side routing:

• Switch from hash mode (which adds # to URLs) to history mode. This relies on server rewrite rules (above) to work, but it keeps your URLs clean.
• For example, in Vue Router:

  import { createRouter, createWebHistory } from 'vue-router';
  
  const router = createRouter({
    history: createWebHistory(), // Use this instead of createWebHashHistory()
    routes: [
      { path: '/:slug', component: TruckProfileComponent }
    ]
  });
  

• Always use frontend routing methods for internal navigation (like router.push('/SuperTransport') in Vue, or navigate('/SuperTransport') in React Router) instead of <a href="/getindex/?slug=supertransport"> or window.location.href. Direct links to the raw endpoint will bypass your pretty URL setup.

3. Avoid Server-Side Redirects in Your Application Code #

If you're rendering pages server-side (e.g., with PHP, Node.js, or Python), make sure you're not sending a 301/302 redirect to the getindex/?slug=... URL. Instead:

• Parse the slug directly from the requested URL path (e.g., SuperTransport from /SuperTransport)
• Render the truck profile page directly without redirecting the browser.

For example, in PHP:

// Instead of this (which redirects):
// header("Location: /getindex/?slug=supertransport");
// exit;

// Do this:
$slug = trim($_SERVER['REQUEST_URI'], '/');
// Fetch truck data using $slug and render the profile page

4. Fix Case Sensitivity Issues #

Notice your pretty URL uses SuperTransport (camel case) but the query string has supertransport (lowercase). Ensure your server and application handle case consistently:

• Use the NC flag in Apache rules (as shown earlier) to ignore case
• Normalize the slug to lowercase in your application code before fetching data (e.g., strtolower($slug) in PHP) to avoid mismatches.

Once you implement these changes, accessing http://app.fragtopgaver.dk/SuperTransport should load the correct page and keep that clean URL in the address bar.

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