Angular 带有多个斜杠的路由覆盖文件夹路径

Question

我有一个 Angular 应用程序，它使用 ngRoute 模块以及 HTML5 模式 pushState 来清洁 URL。

app.config(function($routeProvider, $locationProvider){
$locationProvider.html5Mode(true);

$routeProvider
    //Route for home page
    .when("/", {
        templateUrl: "templates/main.html",
        controller: "imageController",
    })
    //Route for about page
    .when("/me", {
        templateUrl: "templates/me.html",
        controller: "imageController",
    })
    //404 error
    .when("/404", {
        template: "",
        controller: "imageController",
        title: "404 Error",
    })
    //Default route to /
    .otherwise({
        redirectTo: "/404",
    });
});

我更改了我的 .htaccess 文件以重写尾部斜杠（“/”）。

RewriteEngine on
RewriteBase /

# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d 

RewriteRule ^ - [L]

# Redirect urls without a trailing slash
RewriteRule ^(.*)/$  [L,R=301]

# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ index.html [L]

这对于一个尾部斜杠非常有效，例如'http://example.com/me/' updates to 'http://example.com/me' 并相应地进行路由。

但是，当有多个斜杠时，路由会中断，例如“http://example.com/me/foo”路由到不完整的页面，而不是重定向到“/404”。我该如何解决这个问题，以便如果“/me/foo”路由不存在，它会被重定向到“/404”。

Answer 1

你的问题是 $route 没有在 /me 之后寻找任何东西，所以它把它当作 404。

如果您希望参数跟随它，请对您的路线执行此操作。

.when("/me/:params?", { // The ? allows for the parameter to be empty so /me and /me/foo will both return the correct route
    templateUrl: "templates/me.html",
    controller: "imageController",
})

如果您想在调用路由后检索这些路由参数，您需要做的就是在您的控制器或指令中使用 $routeParams。

scope.myParam = $routeParam.params;  //In the instince of the URL above your scope.myParams would set to foo

Answer 2

我找到了解决问题的方法。我在需要 Apache 应用重写规则的特定文件夹中使用了多个 .htaccess 文件。

例如要将所有内容路由到 http://example.com/me/，我在 /me 文件夹中创建了一个单独的 .htaccess 文件，并将 RewriteBase 更改为 /me/.

Angular 带有多个斜杠的路由覆盖文件夹路径

Angular Route with multiple slashes override folder path

.htaccess

routing

trailing-slash

angularjs

angularjs-ng-route