0

我有一个nav栏，当我单击栏中的任何选项卡时nav，它会将我带到该选项卡。

<section id="tabs">
    <div class="mob-nav"> 
        <div class="nav nav-tabs nav-fill nav-tabs-scroll" id="nav-tab" role="tablist"> 
            <!-- N add new class nav-tabs-scroll -->
            <a class="nav-item nav-link" style="padding-top: 10px;"
               ng-class="{ active: $index == 0 }"
               id="nav-{{menuTab.menuURL}}-tab"
               data-toggle="{{menuTab.dataToggle}}"
               data-target="#{{menuTab.menuURL}}"
               href="#{{menuTab.menuURL}}" role="tab"
               aria-controls="nav-{{menuTab.menuURL}}"
               ng-repeat="menuTab in menuList">
            </a>
        </div>
    </div>
</section>

<!-- Tab Details -->
<section id="tabs">
    <div class="">
        <div class="">
            <div class="mb-d-150">
                <div class="tab-content py-3 px-sm-0 pl-0 pr-0"
                     id="nav-tabContent"> 
                    <!-- N removed py-3 class -->
                    <div class="tab-pane fade show"
                         ng-class="{ active: $index == 0 }"
                         id="{{menuTab.menuURL}}" role="tabpanel"
                         data-target="#{{menuTab.menuURL}}"
                         aria-labelledby="nav-{{menuTab.menuURL}}-tab"
                         ng-include="menuTab.colDef"
                         ng-repeat="menuTab in menuList">
                    </div>
                    <div class="tab-pane fade" id="changepass" role="tabpanel"
                         aria-labelledby="nav-about-tab"
                         ng-include="changePasswordTemplate">
                    </div>
                </div>    
            </div>
        </div>
    </div>
</section>

这是一个菜单列表的例子。

[{
    menuID: "USER LANDING PAGE"
    caption: "Dashboard"
    parent: "root"
    menuURL: "exampleModal"
    cssClass: "fas fa-cog fa-lg"
    cssParent: "nav navbar-nav"
    aClass: "customerLandingPageTemplate"
    SlNum: 98
    colDef: "/js/templates/user-landing-page.html"
    menuList: []
    dataToggle: "modal"
},{
    menuID: "USER QUERIES"
    caption: "USER QUERIES"
    parent: "root"
    menuURL: "user-queries"
    cssClass: "fas fa-comment-alt fa-lg"
    cssParent: "nav navbar-nav"
    aClass: "userQueriesTemplate"
    SlNum: 100
    colDef: "/js/templates/user-queries.html"
    menuList: []
    dataToggle: "tab"
}]

这是给我menuList的angularjs部分：

GetData.async(CONFIG.urlMaker('ws/menulist?userid=' + userid)).then(function (data) {
    $scope.menuList = data;
    console.log($scope.menuList)
});

当我刷新浏览器时，无论我在哪里刷新，它总是让我回到原来的USER LANDING PAGE状态。但是在浏览器刷新时，我需要重新加载刷新前的页面。

4

1 回答 1

1

您可以使用会话存储来保存最后一个状态。内部代码片段不允许使用会话存储。JSBin 上的一个工作示例。

angular.module('app', ['ui.router'])
  .config(($stateProvider) => {
    const helloState = {
      name: 'hello',
      url: '/hello',
      template: '<h3>hello world!</h3>'
    }

    const aboutState = {
      name: 'about',
      url: '/about',
      template: '<h3>Its the UI-Router hello world app!</h3>'
    }

    $stateProvider.state(helloState);
    $stateProvider.state(aboutState);
  })
  .run(($state, $transitions) => {
    $transitions.onSuccess({}, transition => {
      sessionStorage.setItem('lastState', transition.to().name);
    });
    const lastState = sessionStorage.getItem('lastState');
    if (lastState) {
      $state.go(lastState);
    }
  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script src="//unpkg.com/@uirouter/angularjs/release/angular-ui-router.min.js"></script>

<body ng-app="app">

  <a ui-sref="hello" ui-sref-active="active">Hello</a>
  <a ui-sref="about" ui-sref-active="active">About</a>

  <ui-view></ui-view>
</body>
于 2020-03-01T13:15:56.293 回答