ui-router子状态不使​​用$ locationProvider.html5Mode（true）重新加载父页面;

Question

这应该是相当简单的。 目标是删除网址中的＃。为实现这一点，我使用$ locationProvider.html5Mode（true）;.但这会在儿童状态下打破重装。

我正在使用AngularJS 1.6.4和ui-router 1.0.0。

我不是在寻找后端的任何东西。  我只是使用Grunt来提供应用程序。我不需要配置任何后端来做任何事情。它需要是一个前端修复。无论是在ui-router中，还是在Gruntfile中的某些东西。

当然，

index.html已经设置了基础href =“/”。

routes.module.js     'use strict';

/**
 * @ngdoc function
 * @name app.module:app.routes
 * @description
 * # app.routes
 * Rollup module for routes and config for parent route
 */
angular
  .module( 'app.routes', [
    'ui.router'
  ])
  .config( routesConfig );

    function routesConfig( $stateProvider, $urlRouterProvider, $locationProvider ) {
  $locationProvider.html5Mode(true); // this breaks the refreshing
  $urlRouterProvider.otherwise( '/' );

  $stateProvider
    .state( 'main', {
      url : '',
      component : 'main',
      abstract : true,
    })
    .state( 'main.home', {
      url : '/',
      component : 'home',
    })
    .state( 'main.admin', {
      url : '/admin',
      component : 'admin',
    });
}

我刚刚获得了默认的Gruntfile.js，这是连接任务：

    connect : {
      options : {
        port : 9000,
        // Change this to '0.0.0.0' to access the server from outside.
        hostname : 'localhost',
        livereload : 35729
      },
      livereload : {
        options : {
          open : true,
          middleware : function( connect ) {
            return [
              connect.static( '.tmp' ),
              connect().use(
                '/bower_components',
                connect.static( './bower_components' )
              ),
              connect().use(
                '/app/styles',
                connect.static( './app/styles' )
              ),
              connect.static( appConfig.app )
            ];
          }
        }
      },

Answer 1

我找到答案后，4名巨魔嘲笑我使用过时的技术堆栈。是的，我知道这是2017年。但请记住，世界上有一半的企业仍在使用Windows XP，而且常绿浏览器仍然完全在ES5上。

无论如何，发现了Github Issue 433的答案，直到2月25日nitin19srivastava的评论。

修复步骤：

1。添加.html5Mode（true）.hashPrefix（''）;

// app.js或router.module.js

$locationProvider.html5Mode(true).hashPrefix('');

2。安装mod-rewrite节点模块

npm install connect-modrewrite --save 

3。将其拉入Gruntfile.js

的变量顶部

4。替换livereload＆gt;下的代码;选项＆gt;具有以下内容的中间件（确保添加额外的选项参数）：

        var middlewares = [];
        middlewares.push(modRewrite(['^[^\.]*$ /index.html [L]']));
        middlewares.push(connect.static('.tmp'));
        middlewares.push(connect().use(
          '/bower_components',
          connect.static('./bower_components')));
        middlewares.push(connect().use(
          '/app/styles',
          connect.static('./app/styles')));
        middlewares.push(connect.static(appConfig.app));
        options.base.forEach(function(base) {
          middlewares.push(connect.static(base));
        });

        return middlewares;

或者如果你喜欢看彩色照片：

5。重启Grunt服务器！