ui-router 子状态不使用 $locationProvider.html5Mode(true) 重新加载父页面刷新；答案

【问题标题】：ui-router child state not reloading parent with page refresh with $locationProvider.html5Mode(true);ui-router 子状态不使用 $locationProvider.html5Mode(true) 重新加载父页面刷新；
【发布时间】：2017-07-17 19:00:49
【问题描述】：

这应该很简单。目标是删除 url 中的 # 。为此，我使用 $locationProvider.html5Mode(true);。但这会在子状态下中断重新加载。

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

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

index.html 当然有 base href="/" 集。

routes.module.js '使用严格';

/**
 * @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 )
            ];
          }
        }
      },

【问题讨论】：

标签： angularjs html gruntjs angular-ui-router state

【解决方案1】：

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

无论如何，从Github Issue 433 到 nitin19srivastava 于 2 月 25 日发表的评论中找到了答案。

修复步骤：

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 > options > middleware 下的代码替换为以下内容（一定要添加额外的 options 参数）：

        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 服务器！

【讨论】：