javascript - 使用 AngularJS $stateProvider 在 URL 中隐藏当前状态名称

Question

我正在使用 AngularJS $stateProvider。为了在我的应用程序中导航，用户使用此功能从一个状态转到另一个状态:

$rootScope.gotoState = function(stateName) {
  $state.go(stateName, {}, { location: false } ); 
};

这允许在不更改 URL(位置:false)的情况下更改状态并加载新 View 。

但是，当进入应用程序时(发生在“index.html”页面)，显示的URL 是“myWebsite/index.html#/tab/index”，索引是应用程序的第一个状态。我的问题是:如何将其更改为仅显示“myWebsite/index.html”？

注意:目前，用户无法使用浏览器的前后按钮进行导航，因为位置设置为 false，因此如果存在也可以解决此问题的解决方案，我有兴趣。

这是国家声明:

angular.module('ionicApp', ['ionic', 'ngCookies'])
.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {

    $ionicConfigProvider.tabs.position('top'); // values: bottom, top

    $stateProvider
      .state('tabs', {
        url: "/tab",
        abstract: true,
        templateUrl: "templates/tabs.html"
      })
      .state('tabs.index', {
        url: "/index",
        cache:false,
        views: {
          'index-tab': {
            templateUrl: "home.html"
          }
        }
      })
      .state('tabs.profile', {
        url: "/profile",
        cache:false,
        views: {
          'profile-tab': {
            templateUrl: "profile.html"
          }
        }
      })

      $urlRouterProvider.otherwise("/tab/index");
  })

  .run(function($rootScope, $state, $location) {
    $rootScope.$state = $state;
    $rootScope.$location = $location;
    $rootScope.gotoState = function(stateName) {
      $state.go(stateName, {}, { location: false } ); 
    };
  })

我对单页应用程序不是很熟悉，我不知道我问的这个结构是否可行。如果不是，我会很高兴知道什么是最好的选择。

Answer 1

按如下方式更改您的 tabs.index 状态和后备 url:

.state('tabs.index', {
        url: "/",
        cache:false,
        views: {
         'index-tab': {
           templateUrl: "home.html"
       }
     }
   })

$urlRouterProvider.otherwise("/");

现在这将加载您的应用程序的索引页面，# 之后没有任何 url。然后在 html 上使用 $state.go 或 ui-sref 你可以在状态之间导航。即使您可以拥有所有状态 url: "/" 只要您使用了唯一的状态名称及其父子关系，它就可以正常工作(通过这种方式您甚至不需要在 $state.go 中使用 location: false)。 Example

但它不会解决后退按钮问题。因为后退/前进按钮是浏览器的 native 功能，它基本上基于唯一的 url，但是当您对所有状态使用相同的 url 时，浏览器将不知道它的不同状态，后退按钮将无法按预期工作。对于所有状态使用唯一的不同 url 还有其他好处，因为用户可以将它们添加为书签。但是，如果您正在构建移动应用程序(使用 ionic)，为什么要关心 url 是否显示，因为最终它不会显示在应用程序的界面中，在 ionic 中，url 只是路由逻辑的一部分。因此，为您的状态设置唯一的 url 将有利于您和用户使用 native 移动后退按钮。

附言要从 Angular 应用程序的 url 中删除#，您必须使用 html5mode:

$locationProvider.html5Mode(true);