AngularJS：在启用 Html5 模式的情况下使用 Angular Ui 路由器时页面重新加载失败 [重复]

Question

我在我的 Angular 应用程序中使用 Angular UI 路由器，并且我启用了 HTML5 模式，通过在配置中使用 $locationProvider 来删除我的 URL 中的#。

angular.module('myApp', ['ui.router'])
 .config(function($stateProvider, $urlRouterProvider, $locationProvider) {
    $urlRouterProvider.otherwise('/');
    $stateProvider
       .state('home', {
            url: '/',
            templateUrl: 'views/home.html',
            controller:'HomeController'
        })
        .state('about', {
            url: '/about',
            templateUrl: 'views/about.html',
            controller:''
       })
       .state('skills', {
            url: '/skills',
            templateUrl: 'views/skills.html',
            controller: ''
       })
       .state('projects', {
            url: '/projects',
            templateUrl: 'views/projects.html',
            controller: 'ProjectsController'
       })
       .state('contact', {
            url: '/contact',
            templateUrl: 'views/contact.html',
            controller: ''
       });
    $locationProvider.html5Mode(true);
});

我也设置了

<base href="/">

index.html 文件中的标记也是如此。路由工作正常，我可以导航到页面并删除 # 但是当我使用浏览器上的重新加载按钮刷新页面时，我得到一个 404 错误页面。

我正在使用 Webstorm IDE 进行开发。有人可以为此提供解决方案吗？

Answer 1

通过启用 HTML5 模式 你的 url hash # 变成 hashbang #！然后 它在浏览器上返回没有 hashbang 的 url。 因此，即使浏览器上的网址类似于

http://www.example.com/about

实际的 hashbang url 是这样的。

http://www.example.com/#!/about

尝试根据此更改您的 htaccess 文件。 它应该位于您的 index.html 所在的公共目录中， 如果你使用的是 apache。

RewriteEngine On  
  # If an existing asset or directory is requested go to it as it is
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
  RewriteRule ^ - [L]

  # If the requested resource doesn't exist, use index.html
  RewriteRule ^ /index.html