带有 Html5Mode 的 Angular-UI-Router 刷新页面问题

Posted 2023-02-19

【中文标题】带有 Html5Mode 的 Angular-UI-Router 刷新页面问题

【英文标题】：Angular-UI-Router with Html5Mode refresh page issue

【发布时间】：2015-08-05 05:28:41

【问题描述】：

我有一个使用 angular-ui-router 和 html5mode(true) 的应用。在运行和路由到其他状态时，一切似乎都运行良好。

我的默认状态是 app/calendar，它是在 module.run() 期间设置的

但是当我在其他路线中刷新页面时（比如说 app/profile），它会将我带回应用程序/日历。

调试我注意到刷新页面后 $state.current 总是为空

Object name: "", url: "^", views: null, abstract: true

如果只有 $state.current 有值，我就可以转换到当前状态。

我有什么遗漏的吗？

希望有人可以提供帮助。

我的服务器路由看起来像

app.get('/:var(/|app/calendar|app/customers|app/profile|app/settings)?', function(req, res) 
    res.sendFile('/app/main/main.html', root: '../Appt/public' );
);

我总是提供同一个文件。

还有我的前端状态配置

(
    function()
    
        angular.module('Appt.Main').config(['$stateProvider','$locationProvider',function($stateProvider,$locationProvider)
        
            $locationProvider.html5Mode(true);

            var calendar = 
                    name: 'calendar',
                    url: 'app/calendar',
                    controller: 'Appt.Main.CalendarController',
                    controllerAs: 'calendar',
                    templateUrl: '/app/main/calendar/calendar.html'
                ,
                customers = 
                    name: 'customers',
                    url: 'app/customers',
                    controller : 'Appt.Main.CustomersController',
                    controllerAs : 'customers',
                    templateUrl : '/app/main/customers/customers.html'
                ,
                profile = 
                    name: 'profile',
                    url: 'app/profile',
                    controller : 'Appt.Main.ProfileController',
                    controllerAs : 'profile',
                    templateUrl : '/app/main/profile/profile.html'
                ,
                settings = 
                    name: 'settings',
                    url: 'app/settings',
                    controller : 'Appt.Main.SettingsController',
                    controllerAs : 'settings',
                    templateUrl : '/app/main/settings/settings.html'
                ;


            $stateProvider.state(calendar);
            $stateProvider.state(customers);
            $stateProvider.state(profile);
            $stateProvider.state(settings);

        ]);

    
)();

我的模块.run

(
    function()
    
        'use strict';

        angular.module('Appt.Main',['ngRoute','ui.router','Appt.Directives'])
            .run(['$state','$stateParams', function ($state,$stateParams) 
                console.log('Appt.Main is now running')


                console.log($state.current);
                console.log($stateParams);

                $state.transitionTo('calendar');


            ])
    
)();

【参考方案1】：

我遇到了同样的问题，我通过添加这个来解决它：

app.config(..., $urlMatcherFactoryProvider) 
    $urlMatcherFactoryProvider.strictMode(false);
);

这是因为我的路由在路径末尾添加了一个尾部斜杠 /，而 $stateProvider 无法识别 URL，因此将我带回了原始状态。

【参考方案2】：

我不确定这是否能解决您的问题，但我遇到了一个非常相似的问题。使用html5mode 时我必须做的第一件事是使用重写属性，这样当我刷新页面时，无论$state 是什么，应用程序都会从​​索引文件重新加载。这是我正在使用的代码，但可能会有所不同，具体取决于您使用的服务器端。

<IfModule mod_rewrite.c>
    RewriteEngine On
    #RewriteBase /relative/web/path/

    RewriteCond %REQUEST_FILENAME -f [OR]
    RewriteCond %REQUEST_FILENAME -d
    RewriteRule ^(.+) - [PT,L]

    RewriteCond %REQUEST_URI !=/favicon.ico
    RewriteRule ^(.*) index.html

    RewriteCond %HTTP:Authorization  !^$
    RewriteRule .* - [E=REMOTE_USER:%HTTP:Authorization]
</IfModule>

您可以在此处阅读更多信息，docs from ui-router

另外，您最好为您的应用设置一个基础或不使用基础。

您可以在 head 标签（或其他基本文件夹，具体取决于您的结构）中插入 <base href="/" >。

或者你可以使用：

$locationProvider.html5Mode(
    enabled: true,
    requireBase: false
);

所以你不必使用基地。

另外，您不需要 .run 来定义默认状态，ui-router 可以使用 $urlRouterProvider.when 或 $urlRouterProvider.otherwise 来完成 你可以read more in the docs

由于我是 Angular 的新用户，这正是我为解决我的问题所做的，这与您的问题非常相似。希望对你有帮助。