AngularJS UI Router: конфликт маршрута из-за необязательного параметра

У меня есть несколько маршрутов в моем приложении AngularJS, я использую UI-Router для маршрутизации между состояниями/страницами на моем сайте. Проблема, с которой я сталкиваюсь, заключается в том, что у меня есть конфликтующие маршруты из-за необязательного параметра, который у меня есть/для главной страницы сайта.AngularJS UI Router: конфликт маршрута из-за необязательного параметра

У меня есть маршрут на домашнюю страницу (example.com) определяется более или менее так:

$stateProvider 
    .state('home', { 
     url: '/:filter', 
     params: { 
      filter: { squash: true, value: null } 
     } 
    });

можно активировать это состояние, перейдя на главную страницу (example.com), а также путем добавления дополнительного параметра example.com/apples, который я использую для фильтрации содержимого на главной странице.

Моя проблема сейчас в том, что я и другие маршруты определены как /login, /about, /help и собирается example.com/login или example.com/help, только активирует home состояние из-за дополнительного параметра /:filter заполнителем я определила который улавливает любой маршрут следующей / ,

Обходной Я попытался добавляю слэш на мои другие определения маршрута и ссылок url: /login/ и активировать: example.com/login/, который работает, но я не буду в состоянии использовать ui-sref директивы UI маршрутизатора, чтобы обратиться к моим государствам по имени вместо URL внутри моего приложения, а конечная косая черта выглядит просто уродливой.

То, что я пытаюсь добиться, чтобы иметь возможность иметь дополнительный параметр для домашней страницы /:filter и все еще быть в состоянии пойти на мои другие маршруты /login, /register и т.д .. без необходимости, чтобы обойти его, добавив слеш.

Был ли кто-нибудь в этой или подобной ситуации раньше? Любое понимание или предложение очень ценятся. Заранее спасибо.

источник

2015-09-04 Daniel Sandiego

Существует a working example

Дело в том, чтобы определить родной штат, как последний:

// this url will be registered as first 
.state('login', { 
     url: "/login", 
     templateUrl: 'tpl.html', 
}) 
// this as second 
.state('about', { 
     url: "/about", 
     templateUrl: 'tpl.html', 
}) 
... 
// this will be registered as the last 
.state('home', { 
     url: "/:filter", 
     templateUrl: 'tpl.html', 
     params: { 
     filter: { squash: true, value: null } 
     } 
})

UI-маршрутизатор перебирает зарегистрированных состояний в таком порядке, и пытается выяснить, первый матч. Таким образом - все остальные состояния (Логин, о) будет иметь приоритет «домашнего» государства ...

Проверить это here

источник

2015-09-04 16:03:27

Ах, так UI-маршрутизатор будет перебирать зарегистрированные государства в порядке, они определены. Мои маршруты, однако, определены в модулях, поэтому я имею в виду, что мое угловое приложение разбито на модули, например, страница входа в систему - это модуль, страница - это модуль и т. Д., И маршруты для них определяются внутри каждого модуля. Затем модули объединяются через модуль приложения. Есть ли способ сделать это без необходимости определять каждый маршрут внутри одного $ stateProvider или модуля? –

Я бы сказал - модули - это разные темы, здесь. Это может быть много модулей, это может быть просто один. Я использую несколько модулей, с действительно отличными приставками URL ...так что это не имеет значения в конце. Но в вашем случае существенным является ** порядок государственной регистрации **. Теперь все вокруг. Просто UI-Router должен найти какой-то способ, как решить приоритет. И это по дизайну порядок регистрации. Надеюсь, это поможет немного ... –

Да, это действительно помогает! как много, мой конфликт маршрутизации был разрешен из-за вашего ответа, особенно ваш комментарий ** о порядке государственной регистрации **. Большое вам спасибо, это был день +, когда я пытался это разрешить. Ура! –

Лучшая практика будет сказать, что это, вероятно, следует параметр строки запроса, а не маршрут параметр, поскольку вы используете его для фильтрации данных. Для того, чтобы сделать это с UI-маршрутизатором просто определить его следующим образом:

$stateProvider 
.state('home', { 
    url: '/?filter' 
});

Теперь просто сделать

$state.go('home', {filter: 'apples'})

источник

2015-09-04 16:32:42

AngularJS UI Router: конфликт маршрута из-за необязательного параметра

ответ

Смежные вопросы