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

时间:2016-07-28 07:46:20

标签: javascript angularjs

我使用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'});
    }]);

我只使用角度。

3 个答案:

答案 0 :(得分:0)

那是因为这段代码

$locationProvider.html5Mode(true);

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

答案 1 :(得分:0)

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

此外,您可以使用$locationProvider.html5Mode(true)的HTML5路由,该路由使用我猜您使用的路由http://localhost:8080/about

答案 2 :(得分:0)

关于AngularJS路由的文档不是很清楚。它讨论了Hashbang和HTML5模式。事实上,AngularJS路由以三种模式运行:

  • Hashbang Mode
  • HTML5模式
  • HTML5模式中的Hashbang

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

您应该更改此行

$locationProvider.html5Mode(true);

到此行

$locationProvider.html5Mode(false);

这将启用Hashbang模式,并在您的网址

之前添加#符号

进一步深入了解这三种模式。请参阅此 Stackoverflow 问题here。希望这会有所帮助