Imagine such a scenario. We can enter an operation page through menu navigation. When some information has been entered or selected in the page, we find that it is not what we want at all, and we hope to quickly restore the initial state of the page. At this time, an ideal choice is to click the corresponding item in the menu bar again

If your menu is in this way, then click on the current menu, the page will not have any reaction

<li ng-repeat="m in menus"  ui-sref-active="li_active">
    <a href="#" ui-sref="{{m.state}}">
        <span ng-bind="m.name"></span>
    </a>
</li>

To find information, there are a lot of information prompts us to use the UI Sref opts command to set the reload parameter. Change the code to this way. Under the test, we will find that the current page is indeed refreshed, but the whole page is also refreshed

<li ng-repeat="m in menus"  ui-sref-active="li_active">
    <a href="#" ui-sref="{{m.state}}" ui-sref-opts="{reload:true}">
        <i ng-class="message.image"></i>
        <span ng-bind="message.menuCName"></span>
    </a>
</li>

In fact, the reload parameter can not only pass a Boolean parameter, but also accept string and object parameters. If we just want to refresh the current routing page without refreshing the parent route, we can set the value of the reload parameter to the string corresponding to the current route. The code is as follows:

<li ng-repeat="m in menus"  ui-sref-active="li_active">
    <a href="#" ui-sref="{{m.state}}" ui-sref-opts="{reload:'{{m.state}}'}">
        <i ng-class="message.image"></i>
        <span ng-bind="message.menuCName"></span>
    </a>
</li>

Of course, the above scenario is just a case. We will also use page refresh in the control logic of the program. The method is similar. A route can be skipped through $state.go, and this parameter can also be used for processing; Another way is to directly use $state.reload, call $state.reload() to load the whole page, and $state.reload (‘currentstate ‘) to load the current route. These are clearly explained in the comments of the source code

/**
 * @ngdoc function
 * @name ui.router.state.$state#reload
 * @methodOf ui.router.state.$state
 *
 * @description
 * A method that force reloads the current state. All resolves are re-resolved,
 * controllers reinstantiated, and events re-fired.
 *
 * @example
 * <pre>
 * var app angular.module('app', ['ui.router']);
 *
 * app.controller('ctrl', function ($scope, $state) {
 *   $scope.reload = function(){
 *     $state.reload();
 *   }
 * });
 * </pre>
 *
 * `reload()` is just an alias for:
 * <pre>
 * $state.transitionTo($state.current, $stateParams, { 
 *   reload: true, inherit: false, notify: true
 * });
 * </pre>
 *
 * @param {string=|object=} state - A state name or a state object, which is the root of the resolves to be re-resolved.
 * @example
 * <pre>
 * //assuming app application consists of 3 states: 'contacts', 'contacts.detail', 'contacts.detail.item' 
 * //and current state is 'contacts.detail.item'
 * var app angular.module('app', ['ui.router']);
 *
 * app.controller('ctrl', function ($scope, $state) {
 *   $scope.reload = function(){
 *     //will reload 'contact.detail' and 'contact.detail.item' states
 *     $state.reload('contact.detail');
 *   }
 * });
 * </pre>
 *
 * `reload()` is just an alias for:
 * <pre>
 * $state.transitionTo($state.current, $stateParams, { 
 *   reload: true, inherit: false, notify: true
 * });
 * </pre>

 * @returns {promise} A promise representing the state of the new transition. See
 * {@link ui.router.state.$state#methods_go $state.go}.
 */

in addition, it should be emphasized that the version of UI router you are using should be 0.2.14 or above, otherwise the whole page will still be refreshed, which seems to be a bug in the previous version

the suggestion of using version 0.2. X can be directly upgraded to 0.2.18