Question

我正在使用AngularJS构建一个wordpress主题，并已切换到使用ui-router而不是ngRoute。除非刷新页面或在浏览器中输入URL，否则一般情况下都能正常工作。页面加载但没有加载状态。唯一的例外是/ blog，这是一个与wordpress URL不匹配的页面。 Wordpress会抛出404，但Angular会加载正确的路径 - 我不明白wordpress是如何影响Angular的，因为在所有情况下都会加载相同的文件（index.php）并且Angular本身会启动，如console.log（）所示。

我使用ngRoute进行了非常相似的配置，并且无论wordpress是否抛出404，一切都正常。

单击菜单链接时，状态正确加载，URL按指定更改。

如果我取消注释“其他”声明，则会触发除/ blog以外的所有网址并重定向到主页。

在错误情况下（除了/ blog之外），诊断状态$ on（）事件不会触发。

主角JS代码的顶部。

app = angular.module('app', ['ngSanitize','ngAnimate', 'ui.router']);

app.config(function($locationProvider) {
    $locationProvider.html5Mode(true);
});

app.run( function($rootScope) {

  console.log('angular');

  $rootScope.$on('$stateChangeStart', 
    function(event, toState, toParams, fromState, fromParams){ 
      console.log('start');
    });

  $rootScope.$on('$stateNotFound', 
    function(event, toState, toParams, fromState, fromParams){ 
      console.log('not found');
    });

  $rootScope.$on('$stateChangeError', 
    function(event, toState, toParams, fromState, fromParams, error){ console.log(error); });

});    

app.config(function($stateProvider, $urlRouterProvider) {

  // $urlRouterProvider.otherwise("/");

  $stateProvider
    .state('root', {
      url: "/",
      templateUrl: myLocalized.partials + 'front.html',
      controller: 'Main'
    })
    .state('portfolio', {
      url: "/portfolio",
      templateUrl: myLocalized.partials + 'portfolio.html',
      controller: 'Portfolio'
    })
    .state('portfolio.item', {
      url: "/portfolio/:slug",
      templateUrl: myLocalized.partials + 'portfolio-item.html',
      controller: 'Portfolio'
    })
    .state('blog', {
      url: "/blog",
      templateUrl: myLocalized.partials + 'blog.html',
      controller: 'Blog'
    })
    .state('page', {
      url: '/:slug',
      templateUrl: myLocalized.partials + 'content.html',
      controller: 'Page',
      resolve: {
        pageData: function(WPService, $stateParams) {
          console.log($stateParams);
          return WPService.getPageBySlug($stateParams.slug);
        }
      }
    });

});

我在页面的头部包含<base href="/" />，在index.php文件中设置了ui-view属性。

Answer 1

在深入了解ui-router代码后，我发现这与尾部斜杠有关。 Wordpress .htaccess（我认为）只要匹配wordpress中的页面或其他资源，就会在URL中添加一个尾部斜杠。这导致ui-router无法识别URL，因为我的路由/状态都没有斜线。在404s的情况下，wordpress没有添加斜杠，因此ui-router正确匹配并处理路由。

我通过将wordpress永久链接设置修改为没有尾部斜杠来解决此问题。

编辑：你也可以使用$ urlMatcherFactoryProvider.strictMode（false）;在配置块中允许尾部斜杠

UI路由器不评估Wordpress主题中的路由

1 个答案: