Angular 带有多个斜杠的路由覆盖文件夹路径
Angular Route with multiple slashes override folder path
我有一个 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”。
你的问题是 $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
我找到了解决问题的方法。我在需要 Apache 应用重写规则的特定文件夹中使用了多个 .htaccess
文件。
例如要将所有内容路由到 http://example.com/me/,我在 /me
文件夹中创建了一个单独的 .htaccess
文件,并将 RewriteBase
更改为 /me/
.
我有一个 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”。
你的问题是 $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
我找到了解决问题的方法。我在需要 Apache 应用重写规则的特定文件夹中使用了多个 .htaccess
文件。
例如要将所有内容路由到 http://example.com/me/,我在 /me
文件夹中创建了一个单独的 .htaccess
文件,并将 RewriteBase
更改为 /me/
.