71

在通过 AngularJS 启用 html5Mode 时$locationProvider.html5Mode(true),当您进入网站更深处的页面时,导航似乎会出现偏差。

例如:

  • http://www.site.com
    当我导航到根目录时,我可以单击站点中的所有链接,Angular$routeProvider将接管站点导航并加载正确的视图。

  • http://www.site.com/news/archive
    但是当我导航到这个 url 时(或者当我在像上面这样的深度链接上时点击刷新......)这个导航没有像我期望的那样工作。首先,正如$locationProvider.html5Mode 的文档所指定的,我们捕获服务器上的所有 url,类似于otherwiseangular 中的路由,并返回与根域相同的 html。但是,如果我随后$locationrunangular 函数中检查对象,它会告诉我 that http://www.site.comis myhost并且 that /archiveis my path。到达子句$routeProvider.otherwise()因为我只有/news/archive一个有效的路线。该应用程序会做一些奇怪的事情。

也许服务器上的重写需要以不同的方式完成,或者我需要以角度指定内容,但目前我不知道为什么 angular see 是不/news包含段的路径。

示例 main.js:

// Create an application module
var App = angular.module('App', []);

App.config(['$routeProvider', '$locationProvider', function AppConfig($routeProvider, $locationProvider) {

    $routeProvider
        .when(
        '/', {
            redirectTo: '/home'
        })
        .when('/home', {
            templateUrl: 'templates/home.html'
        })
        .when('/login', {
            templateUrl: 'templates/login.html'
        })
        .when('/news', {
            templateUrl: 'templates/news.html'
        })
        .when('/news/archive', {
            templateUrl: 'templates/newsarchive.html'
        })
        // removed other routes ... *snip
        .otherwise({
            redirectTo: '/home'
        }
    );

    // enable html5Mode for pushstate ('#'-less URLs)
    $locationProvider.html5Mode(true);
    $locationProvider.hashPrefix('!');

}]);

// Initialize the application
App.run(['$location', function AppRun($location) {
    debugger; // -->> here i debug the $location object to see what angular see's as URL
}]);

根据请求编辑 ,服务器端的更多细节:服务器端由zend框架的路由组织,它处理自己的路由(用于在特定/apiurl上向前端提供数据,最后有一个catch -all 路由,如果没有绑定特定的其他路由,它提供与根路由相同的 html。因此,它基本上为该深度链接路由上的主页 html 提供服务。

在查看问题后更新 2 ,我们注意到此路由在 Angular 1.0.7 稳定版上正常工作,但在 Angular 1.1.5 不稳定版中显示上述行为。

我已经检查了更改日志,但到目前为止还没有发现任何有用的东西,我想我们可以将它作为错误提交,或者与他们所做的某个更改相关联的不需要的行为,或者只是等待它是否得到修复后期要发布稳定版。

4

5 回答 5

84

发现那里没有错误。只需添加:

<base href="/" />

到你的<head />.

于 2013-11-12T16:23:31.927 回答
12

这是我在超过我愿意承认的时间之后找到的最佳解决方案。基本上,将 target="_self" 添加到您需要确保页面重新加载的每个链接。

http://blog.panjiesw.com/posts/2013/09/angularjs-normal-links-with-html5mode/

于 2014-10-14T18:13:20.623 回答
9

这个问题是由于使用了 AngularJS 1.1.5(它不稳定,并且显然有一些错误或与 1.0.7 不同的路由实现)

将其转回 1.0.7 立即解决了问题。

已经尝试过 1.2.0rc1 版本,但还没有完成测试,因为我不得不重写一些路由器功能,因为他们把它从核心中取出来了。

无论如何,这个问题在使用 AngularJS 和 1.0.7 时得到了解决。

于 2013-08-21T12:07:37.920 回答
7

我的问题解决了这些:

1-将此添加到您的脑海中:

<base href="/" />

2-使用这个app.config

$locationProvider.html5Mode(true);
于 2017-01-29T17:47:53.047 回答