Question

我有一个使用ngRoute模块的Angular应用程序以及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文件更改为重写尾随斜杠（＆＃34; /＆＃34;）。

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 ^(.*)/$ $1 [L,R=301]

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

这适用于一个尾部斜杠，例如＆＃39; http://example.com/me/＆＃39;更新为＆＃39; http://example.com/me＆＃39;并相应地路由。

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

Answer 1

你的问题是$ route之后没有寻找任何东西，因此它将它视为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，您只需在控制器或指令中使用$routeParams即可。

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

Answer 2

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

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

具有多个斜杠的Angular Route覆盖文件夹路径

2 个答案: