在ngRoute中刷新页面时找不到页面

Question

我正在使用angularjs ngRoute路由单个页面应用程序。 它显示localhost / about或localhost / blog。 当我重载时，“无法获取/关于”。 我怎样才能解决这个问题。

我的路由器配置如下。

var myApp = angular.module('myApp',['ngRoute']);
myApp.config(['$locationProvider','$routeProvider',function($locationProvider,$routeProvider){
    $locationProvider.html5Mode(true);
    $routeProvider
        .when('/',{
            templateUrl: 'views/pages/home.html',
            controller: 'homeCtrl'
        })
        .when('/about',{
            templateUrl: 'views/pages/about.html',
            controller: 'aboutCtrl'
        })
        .when('/contact',{
            templateUrl: 'views/pages/contact.html',
            controller: 'contactCtrl'
        })
        .when('/blog',{
            templateUrl: 'views/pages/blog.html',
            controller: 'blogCtrl'
        })
        .otherwise({redirectTo: '/home'});
    }]);

我只使用角度。

Answer 1

那是因为这段代码

$locationProvider.html5Mode(true);

将其设置为false将在每个URL的开头添加一个# ，因此无论您要重新加载哪个页面，服务器都会为您提供索引页面。

Answer 2

您可能正在使用服务器路由，而不是AngularJS路由。 默认情况下，AngularJS使用#之后的路由来路由url。 例如http：// localhost：8080 /＃/ about 。

此外，您可以将HTML5路由与$locationProvider.html5Mode(true)使用，该路由使用的路由我猜您正在使用http://localhost:8080/about 。

Answer 3

该文档对AngularJS路由不是很清楚。 它讨论了Hashbang和HTML5模式。 实际上，AngularJS路由以三种模式运行：

• Hashbang模式
• HTML5模式
• HTML5模式下的Hashbang

这是因为您使用的是浏览器不支持的HTML5模式。 如上文@Mumpo所述。

您应该更改此行

$locationProvider.html5Mode(true);

到这条线

$locationProvider.html5Mode(false);

这将启用Hashbang模式，并在您的网址之前添加＃号

为了进一步深入了解这三种模式。 请在这里参考这个Stackoverflow问题。 希望这会有所帮助